http://jsbin.com/qafahamugu/1/edit?css,js,output
3
1141
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");
});
尝试了直接修改时间和切换类名的办法，有什么正确的推荐做法吗
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
經測試，似乎只要在修改
-webkit-animation-duration時移除並重新添加-webkit-animation-name: blink即可$animated.attr("style":"-webkit-animation-duration:10s!important;");这样可以用