CSS animation not working on Mobile [Chrome or Saf

Question

I dabbled into CSS animations and I can't for the life of me figure out why this isn't working on my Iphone 5 (both Chrome and Safari).

edit: Specifically,I'm getting the end-state, with no motion at all

Animation | Codepen.io

Part of animation code:

@keyframes base {
0% {transform: scale(0);}
10% {transform: scale(1.1);}
30% {transform: scale(.98);}
50% {transform: scale(1);}
60% {transform: scale(1);}
70% {transform: scale(1.3);}
90% {transform: scale(0);}
100% {transform: scale(0);}
}

Answer 1

You need to add -webkit- prefixes to your transforms. On iOS, all browsers use safari webkit (because they are based on uiwebview), and currently ios webkit only supports transforms with a prefix. What you are seeing is that the transform is always 0 throughout the animation because the non-prefixed selector is not used.