CSS animation，用 JS 修改 duration 无效

Question

http://jsbin.com/qafahamugu/1/edit?css,js,outputchangepausedrunningchangeClass.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");});尝试了直接修改时间和切换类名的办法，有什么正确的推荐做法吗

Answer 1

經測試，似乎只要在修改-webkit-animation-duration時移除並重新添加-webkit-animation-name:blink即可