I've set up a simple JSFiddle to illustrate the problem:
Can anyone tell me why Safari shows the animated element in a paused state as expected, but in Chrome the animation is running? I'm using Chrome 33.0.1750.146, and wonder if this is a bug with the latest build. Or am I completely missing something....
Here's the CSS of the paused element.
#blue-box {
width: 100px;
height: 100px;
background: blue;
-webkit-animation-name: blueBox;
-webkit-animation-play-state: paused;
-webkit-animation-duration: 2000ms;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
animation-name: blueBox;
animation-play-state: paused;
animation-duration: 2000ms;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
Same issue with Chrome Version 33.0.1750.152 Ubuntu 13.10. Animation starts immediately even though animation-play-state is paused. On hover the animation stops. Once you move away from animation it and back on over it begins working.
Works fine on Firefox 28.0.
来源:https://stackoverflow.com/questions/22361643/webkit-animation-play-state-not-working-in-chrome