Question

DEMO - 这是一个动画链接，类似于我在我的网站中使用的动画。我发现在safari中，动画会延迟指定时间的运行。但是在chrome中，动画会立即开始拍摄，就好像忽略了动画播放状态一样。

我正在查看的Chrome版本是33.0.1750.152

经过大量的研究后，我设法找到了这个stack overflow（所以我知道我不会生气）但它从未真正解决过，我希望有人可能知道一个工作或者是否有我使用的css有什么问题？

奇怪的是，我的网站中还有其他css3动画可以正常工作。

.one{
    background-color: red;
    opacity: 0;
    -webkit-animation: one 45s infinite cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: scale(1);
    -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition-duration: 0.01s;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
    z-index: 4;
}

@-webkit-keyframes one {
0% { opacity: 0; 
    -webkit-transform: scale(1);
}
1%{
    -webkit-transform: scale(1.2); 
}
2%{
    -webkit-transform: scale(1); 
    opacity: 1; 
}
15%{
    -webkit-transform: scale(1);
    opacity: 1; 
}
20% { 
    -webkit-transform: scale(1);
    opacity: 0; 
}

25% { opacity: 0; }
30% { opacity: 0; }
35% { opacity: 0; }
40% { opacity: 0; }
45% { opacity: 0; }
50% { opacity: 0; }
55% { opacity: 0; }
60% { opacity: 0; }
65% { opacity: 0; }
70% { opacity: 0; }
75% { opacity: 0; }
80% { opacity: 0; }
85% { opacity: 0; }
90% { opacity: 0; }
95% { opacity: 0; }
100% { opacity: 0; }
}

Answer 1

在原始帖子中发布包含javascript / jquery文章可能会有所帮助。

原始帖子中链接的jsfiddle（http://jsfiddle.net/PB4BB/165/）上的javascript（jquery）件尝试访问"animation-play-state" jquery .css()上的object属性，那是

在原始帖子链接的http://jsfiddle.net/PB4BB/165/：

`$（＆＃34; .one，.two，.three，.four＆＃34;）。css（{＆＃34; animation-play-state＆＃34;：＆＃34; running＆＃34; ..}）

虽然"animation-play-state"不是通过.css()可访问的jquery对象，但至少知道或已成功访问该方法，使用该特定的property表示法。

WebkitAnimationPlayState也许不是jquery对象，也是在jquery源上知道的。 DOM element style可能是WebkitAnimationPlayState property存在的地方。如果使用jquery $(selector)访问DOM element来设置animationPlayState，可以尝试$(selector).get()或$(selector)[0]。

试试这个

$(".one").get(0).style.WebkitAnimationPlayState = "running";

jsfiddle http://jsfiddle.net/guest271314/UJ728/

感谢分享。

希望这有帮助

-webkit-animation-play状态在chrome中被忽略但在safari中有效？

1 个答案: