javascript - CSS animation，用 JS 修改 duration 无效-PHP中文网问答

http://jsbin.com/qafahamugu/1/edit?css,js,output

<body>
<p class="blinksth animated"></p>  
<a href="javascript:void(0)" class="change">change</a>
<a href="javascript:void(0)" class="paused">paused</a>
<a href="javascript:void(0)" class="running">running</a>
<a href="javascript:void(0)" class="change-class">changeClass</a>
</body>

.animated {
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function:ease-in-out;
}
.animated2{
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function:ease-in-out;
}

@-webkit-keyframes 'blink' {
    0% { background: rgba(255,0,0,0.5); }
    50% { background: rgba(255,0,0,0); }
    100% { background: rgba(255,0,0,0.5);}
}

.blinksth {
    width: 100px;
    height: 100px;
    -webkit-animation-name: blink;
}



var $animated = $(".animated");
$(".change").on("click",function(){
  $animated.css({
    "webkitAnimationDuration":"10s"
  });
});
$(".paused").on("click",function(){
  $animated.css({
    "webkitAnimationPlayState":"paused"
  });
});
$(".running").on("click",function(){
  $animated.css({
    "webkitAnimationPlayState":"running"
  });
});
$(".change-class").on("click",function(){
  $(".blinksth").removeClass("animated").addClass("animated2");
});

尝试了直接修改时间和切换类名的办法，有什么正确的推荐做法吗

全部回复(3)

PHP中文网2017-04-10 14:53:47 3楼

w3c标准指定了动画运行过程中的行为：

Changing the values of animation properties while the animation is running has no effect on the amount of time that has elapsed since the animation started running i.e. once the animation is running, updates to animation-delay have no effect. The remainder of the animation runs according to the new animation property values.

因此，运行中的动画改变animation timing / keyframe被忽略是符合标准的。

经确认，Chrome 31和Firefox有LZ预期的行为（但背离了标准定义），但chrome 38回归了标准。
为了与其他浏览器保持一致，开发者已经打好patch，应该在下一版发布会修正。下一版浏览器的行为将和你的预期保持一致了。

解决方案：还是重新应用动画吧：

http://jsbin.com/caruyetafo/2/edit?css,js,output

最后，jQuery的CSS方法就是能够自动帮你添加前缀的。

同时你应用$animated.css({"webkitAnimationDuration":"10s"});的结果是style="-webkit-animation: 10s;"。
不说表现和行为应当分离的问题，你看出来jQuery给你的结果哪里不对了吧？