-webkit-animation-play-state在Chrome中无法使用 [英] -webkit-animation-play-state not working in Chrome

问题描述

我设置了一个简单的JSFiddle来说明问题：

任何人都可以告诉我为什么Safari会按照预期在暂停状态下显示动画元素，但在Chrome中，动画是运行？我使用Chrome 33.0.1750.146，并想知道这是否是最新版本的错误。

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

解决方案

Chrome 33.0版.1750.152 Ubuntu 13.10。即使动画播放状态暂停，动画也会立即启动。悬停时，动画停止。一旦你离开动画，它回到它开始工作。

在Firefox 28.0上可以正常工作。

I've set up a simple JSFiddle to illustrate the problem:

where's the paused state?

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.

这篇关于-webkit-animation-play-state在Chrome中无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！