CSS Animation working on Chrome but not on Safari - html

Question

the code below works fine on Chrome, but not on 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 ? Thx!

Answer 1

It's because you're not setting the full range on the transform percentage. Safari requires that you specify the 100% endpoint. See this related answer: CSS3 animation not working in safari

Answer 2

You only use the webkit.prefix. 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;
}