CSS animation not working on Mobile [Chrome or Safari iOS]

问题

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);}
}

回答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.

来源：https://stackoverflow.com/questions/28731030/css-animation-not-working-on-mobile-chrome-or-safari-ios