我在 css 中创建了一个旋转动画,它需要 1 秒,并使用 .comet 类设置了“forwards”。我怎样才能让动画在每次点击外部元素时开始?
#carousel #big_bubble #cometa.rotation{animation:rotation 1s forwards; -moz-animation:rotation 1.5s forwards; -webkit-animation:rotation 1s forwards; -o-animation:rotation forwards 1s; }
@-moz-keyframes rotation{
from{transform:rotate(0deg);}
to{transform:rotate(-360deg);}
@-webkit-keyframes rotation{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(-360deg);}
}
最佳答案
$(function() {// Shorthand for $( document ).ready()
$( ".trigger" ).click(function(e) {
e.preventDefault();
$(this).addClass( "animation" ).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){
$(this).removeClass( "animation" );
});
});
});
资源:
关于jquery - 我如何在每次使用 JQuery 单击时重复使用 css 设置的动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15066700/