Why doesn't this animation work in Safari (including iOS?) - ios

Question

I'm not even sure what else to try. I've even put it through a CSS validator and it passes. Works in Chrome and Firefox. Safari shows no warnings or errors that I can tell.
Relevant CSS:
.lines {
width: 32px;
margin: 20px auto;
}
.line-bar {
display: inline-block;
background-color: #f7f7f7;
width: 4px;
height: 18px;
border-radius: 4px;
-webkit-animation: loading 1s ease-in-out infinite;
animation: loading 1s ease-in-out infinite;
}
.line-bar:nth-child(1) {
}
.line-bar:nth-child(2) {
-webkit-animation-delay: 0.09s;
animation-delay: 0.09s;
}
.line-bar:nth-child(3) {
-webkit-animation-delay: 0.18s;
animation-delay: 0.18s;
}
.line-bar:nth-child(4) {
-webkit-animation-delay: 0.27s;
animation-delay: 0.27s;
}
#-webkit-keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.2);
}
40% {
transform: scale(1);
}
}
#keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.2);
}
40% {
transform: scale(1);
}
}
http://jsbin.com/yobatuveji/1

Answer 1

You need to use webkit- vendor prefix also on the transform property
#-webkit-keyframes loading {
0% {
-webkit-transform: scale(1);
}
20% {
-webkit-transform: scale(1, 2.2);
}
40% {
-webkit-transform: scale(1);
}
}
Since these keyframes are introduced by the -webkit- prefix.
With this change the animation runs as expected also on Safari (just checked on v.7.1.2/MacOs).