-webkit-animation-fill-mode in safari

i am using keyframes to scale an element on my webpage. The problem is that the animation is running perfectly in chrome but its not running in safari. I am providing values at 0% , 80% and 100% in keyframes and everytime the animation ends it goes back to the properties defined at 80% and not 100%. i also used fill-mode to stop animation at last frame but still got no solution.

@-webkit-keyframes leftpageanim { 
0%{ -webkit-transform:scale(1); 
bottom:-26px; 
} 

80%{ 
-webkit-transform:scale(1.8) ; bottom:140px; 
} 

100%
{ 
-webkit-transform:scale(1.7); bottom:120px; } 
} 

after the animation ends its again reverting back to properties of 80%

Answers


I did some changes in the code. Look at this jsfiddle. The animation now stops at 100%. That's what you wanted, right?

from:

.animator {
    -webkit-animation-name: leftpageanim;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 5s;

to:

.animator {
    -webkit-animation: leftpageanim 5.0s ease-in-out forwards;
    -webkit-animation-iteration-count: 1;

Need Your Help

How can i transfer an already published app to a different company yet remain developer of it

ios app-store

My Company A has built an app and published it on the store under our account.

How to specify file order with Grunt?

node.js gruntjs minimatch

I've just started using Grunt, and I'm trying to get the concat task to concat my files in a specific order. Here's what I've got: