i think my implementation of an animated hexagon has several cross-browser-problems:
http://jsbin.com/mojavowapi/1/edit?css,output
.hexagon {
position: relative;
width: 173px;
height: 300px;
background-image: url(https://live.tlprod.de/temp/glas.jpg);
background-size: auto 100%;
background-position: 50% 50%;
transition: all 2s linear;
margin-left: auto;
margin-right: auto;
}
.hexagon:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: inherit;
}
.hexLeftBox, .hexRightBox {
overflow: hidden;
transform: scaleY(1.6) rotate(-45deg);
background: inherit;
top: 27.9%;
position: absolute;
display: inline-block; /* let the block get the width of the containing image */
z-index: 1;
height: 44%;
}
.hexLeft, .hexRight {
width: auto;
height: 100%; /* get full height of parent element, set width to aspect ratio 1:1 */
}
.hexLeftBox {
transform: scaleY(1.6) rotate(-45deg) translate(-35.5%,-35.5%);
}
.hexRightBox {
right: 0;
transform: scaleY(1.6) rotate(-45deg) translate(35.5%,35.5%);
}
.hexLeftBox:after, .hexRightBox:after {
content: "";
position: absolute;
width: 142%;
height: 142%;
transform: rotate(45deg) scaleY(1) scaleX(1.6) translate(-50%,0%);
transform-origin: 0 0;
background: inherit;
transition: all 2s linear;
}
.hexLeftBox:after {
background-position: -7% top;
}
.hexRightBox:after {
background-position: 107% top;
}
.hexagon:hover {
width: 300px;
height: 350px;
}
.hexagon:hover .hexLeftBox:after {
background-position: -35% top;
}
.hexagon:hover .hexRightBox:after {
background-position: 135% top;
}
.hexagon2 {
width: 300px;
height: 350px;
margin-top: 40px;
}
.hexagon2 .hexLeftBox:after {
background-position: -35% top;
}
.hexagon2 .hexRightBox:after {
background-position: 135% top;
}
In this example the above hexagon changes on hover to the -same- size as the other loaded with.
In Chrome 50 the background image of the after-elements disappear AND the aspect ratio crashes
In IE 11 only the aspect ratio of the edges crashes
In Firefox 46 all works fine
..but the funny thing: In all Browser the second static version with the same values as the hover is working fine.
Are there some problems known and fixable?
The crashed aspect ratio is a webkit-optimizing-issue.
It could be fixed only with switching to a javascript-animation with forcing the rerendering via:
$('body').css('display', 'table').height();
$('body').css('display', 'block');
And with jQuery you can do this in the progress-Parameter of the animate()-function.
Switching to a javascript-animation also eleminates the disappearing after-elements.
Related
I want to build a parallax effect with pure CSS3 and even tho i used "perspective: 1px;" on my parent element, "transform: translateZ(-1px) scale2;" is not working. The IDE i am operating on is Intellij. Can Anybody help?
body {
color: white;
margin: 0;
padding: 0;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
transform-style: preserve-3d;
perspective: 1px;
}
header {
box-sizing: border-box;
min-height: 100vh;
padding: 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url("../../assets/paralax/landscape.jpg");
background-size: cover;
transform-origin: center center 0;
transform: translateZ(-1px) scale2;
z-index: -1;
min-height: 100vh;
}
Trying to implement a sprite sheet animation via css. I have followed this example
https://codepen.io/SitePoint/pen/zxXrzP
However, my animation is sliding vertically and I can not understand why. Any input appreciated.
.parent {
position: relative;
width: 70%;
margin: -10% auto 0 auto;
/* positioning tweak */
}
.parent:before {
content: "";
display: block;
padding-top: 61.37%;
}
.ryu {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url("http://dev.froststudio.se/wp-content/uploads/2020/06/frostcell_v03.png");
background-size: 100%;
animation: sprite 4s steps(79) forwards;
}
#keyframes sprite {
from {
background-position: 0 0%;
}
to {
background-position: 0 100%;
}
}
http://dev.froststudio.se
Cheers,
I am trying to animate a speedometer - going from left (green) to right (red). Once the animation has run am I trying also trying to make the needle loop at the end/red area of the barometer. How can I achieve this using only CSS?
#speedometer {
display: inline-block;
position: relative;
}
#speedometer .barometer {
background-image: url("https://svgshare.com/i/GAZ.svg");
background-repeat: no-repeat;
width: 200px;
height: 200px;
display: inline-block;
}
#speedometer .needle {
background-image: url("https://svgshare.com/i/GBP.svg");
background-repeat: no-repeat;
z-index: 999999;
width: 200px;
height: 250px;
display: inline-block;
left: 0px;
position: absolute;
top: 0px;
}
<div id="speedometer">
<span class="barometer"></span>
<span class="needle"></span>
</div>
You can first adjust the dimension of the needle element and the transform-origin then simply use a rotation:
#speedometer {
display: inline-block;
position: relative;
}
#speedometer .barometer {
background-image: url("https://svgshare.com/i/GAZ.svg");
background-repeat: no-repeat;
width: 200px;
height: 110px;
display: inline-block;
}
#speedometer .needle {
background-image: url("https://svgshare.com/i/GBP.svg");
background-repeat: no-repeat;
z-index: 999999;
width: 200px;
height: 110px;
display: inline-block;
left: 0px;
position: absolute;
bottom: 5px;
animation:
change 3s linear,
loop 1s linear 3s infinite alternate;
transform-origin:50% calc(100% - 8px) ;
}
#keyframes change {
0% {
transform:rotate(-90deg);
}
50% {
transform:rotate(0deg);
}
100% {
transform:rotate(90deg);
}
}
#keyframes loop {
0% {
transform:rotate(90deg);
}
100% {
transform:rotate(70deg);
}
}
<div id="speedometer">
<span class="barometer"></span>
<span class="needle"></span>
</div>
I've recently discovered the following approach for text-progress styling and wonder if there is a workaround to grow the element width from the center, so the text would also fill the from center instead of from the left side.
body {
background-color: black;
}
p {
color: rgba(255, 255, 255, .4);
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
height: 85px;
position: relative;
}
p:before {
max-width: 100%;
width: 0;
height: 85px;
color: #fff;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
content: attr(data-text);
display: block;
animation: background-fill 15s ease-in-out infinite forwards;
}
#keyframes background-fill {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<p data-text='Text'>Text</p>
You can achieve that by also animate left and text-indent
I also changed your p to display as inline-block, so it animate the text and not white space.
Thanks to Gaby aka G. Petrioli, it appears Firefox have issue with percent-based text-indent, so I added a CSS hack to overcome that. And again thanks to Gaby, for his now delete answer, that solved the Firefox issue (though unfortunately fails on IE)
body {
background-color: black;
}
p {
color: rgba(255, 255, 255, .4);
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
height: 85px;
position: relative;
display: inline-block;
}
p:before {
max-width: 100%;
width: 0;
height: 85px;
color: #fff;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
content: attr(data-text);
display: block;
animation: background-fill 5s ease-in-out infinite forwards;
}
#keyframes background-fill {
0% {
left: 50%;
text-indent: -50%;
width: 0;
}
100% {
left: 0;
text-indent: 0;
width: 100%;
}
}
/* Begin - Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
p:before {
width: auto;
right: 50%;
left: 50%;
display: flex;
justify-content: center;
}
#keyframes background-fill {
0% {
right: 50%;
left: 50%;
}
100% {
right: 0;
left: 0;
}
}
}
/* End - Firefox bug fix */
<p data-text='Text'>Text</p>
An alternative to the CSS hack, is a small script, that, on page load, measure the actual width of the element and set the text-indent as px instead of %.
I want the picture to "blink", i.e. to get changed immedietely, but it works like a carousel. Where have I made a mistake?
Here is the code: http://cssdeck.com/labs/1o63nrrv3t
body {
background-color: black;
}
.logo {
height: 850px;
width: 400px;
margin: 0 auto;
}
.logo:before {
content: "";
display: inline-block;
position: absolute;
height: 75px;
width: 400px;
top: 400px;
z-index: 1;
background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat;
font-size: 0;
line-height: 0;
animation: play 1s infinite;
}
#keyframes play {
100% {
background-position: center -75px;
}
}
<!DOCTYPE html>
<head>
<title>Logo</title>
</head>
<body>
<header>
<div class="logo"></div>
</header>
</body>
You can use this css instead to make it work
body {
background-color: black;
}
.logo {
height: 850px;
width: 400px;
margin: 0 auto;
}
.logo:before {
content: "";
display: inline-block;
position: absolute;
height: 75px;
width: 400px;
top: 400px;
z-index: 1;
background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat;
font-size: 0;
line-height: 0;
animation: play 1s infinite;
}
#keyframes play {
0%{
background-position:center top;
}
50%{
background-position:center top;
}
51%{
background-position:center bottom;
}
100% {
background-position:center bottom;
}
}
if you want your picture to blink all you have to do is use the opacity
body {
background-color: black;
}
.logo {
height: 850px;
width: 400px;
margin: 0 auto;
}
.logo:before {
content: "";
display: inline-block;
position: absolute;
height: 75px;
width: 400px;
top: 400px;
z-index: 1;
background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat;
font-size: 0;
line-height: 0;
animation: play 1s infinite;
opacity:0;
}
#keyframes play {
from{opacity:0;}
to {opacity:1;}
}
see your example here