Working with CSS in Chrome, but not Safari
the code below works fine on Chrome, but not Safari:
@-webkit-keyframes jiggle {
0% {
transform: rotate(-.5deg);
-webkit-animation-timing-function: ease-in;
}
50% {
transform: rotate(1deg);
-webkit-animation-timing-function: ease-out;
}
}
.animated_container {
-webkit-animation-name: jiggle1;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 40%;
-webkit-animation-duration: 0.21s;
-webkit-animation-delay: -0.43s;
animation-name: jiggle1;
animation-iteration-count: infinite;
transform-origin: 50% 40%;
}
I created an example in this fiddle: http://jsfiddle.net/2obx0rvL/
What am I missing here? thank!
+3
source to share
2 answers
This is because you are not setting the full range in percent conversion. Safari requires a 100% endpoint. See this answer: CSS3 animation not working in safari
+3
source to share
You are only using the webkit.prefix file. You have to write the code again without the webkit prefix so that other browsers like Safari, Internet Explorer or Firefox can use it.
@-webkit-keyframes jiggle {
0% {
transform: rotate(-.5deg);
-webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;
}
50% {
transform: rotate(1deg);
-webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;
}
}
.animated_container {
-webkit-animation-name: jiggle1;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 40%;
-webkit-animation-duration: 0.21s;
-webkit-animation-delay: -0.43s;
animation-name: jiggle1;
animation-iteration-count: infinite;
transform-origin: 50% 40%;
animation-duration: 0.21s;
animation-delay: -0.43s;
}
-3
source to share