极客观点
项目管理
HarmonyOS
http://jsbin.com/qafahamugu/1/edit?css,js,output
<body>
<div class="blinksth animated"></div>
<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");
});
尝试了直接修改时间和切换类名的办法，有什么正确的推荐做法吗
w3c标准指定了动画运行过程中的行为：
因此，运行中的动画改变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给你的结果哪里不对了吧？