猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

CSS animation，用 JS 修改 duration 无效

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

			

				
慕妹3146593

				
浏览 1537回答 2

			

			
			
		

		


		

		

			
			
2回答

			

				
				

					
					
慕的地10843

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

					

						

							
							
						

						
0

					

				

				
			

			
		

		

			
			打开App，查看更多内容
		

	

	

	随时随地看视频慕课网APP


	
	
	

		
相关分类

		

			
			

			
				 JavaScript