CODEWITHSUNDEEP
ioscssanimationmobile
joshuaArmstrong
joshuaArmstrong

Reputation: 1

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

Upvotes: 0

Views: 2584

Answers (1)

firefoxuser_1
firefoxuser_1

Reputation: 1839

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.

Upvotes: 1

Related Questions