我的图片上有这个动画:
<div class="image_for_sping">
<img src="/anyimage.png">
</div>
图像具有由 jQuery 添加的样式属性的地方:
animation: spin360 0.1s linear 0s 20 forwards paused, spin360 0.25s linear 2s 8 forwards, spin360 0.5s linear 4s 4 forwards, spin360 1s linear 6s 2 forwards, spin90 2s linear 8s 1 forwards
这个动画的CSS:
@-moz-keyframes spin360 { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin360 { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin360 { 100% { transform:rotate(-360deg); } }
@-moz-keyframes spin90 { 100% { -moz-transform: rotate(-90deg); } }
@-webkit-keyframes spin90 { 100% { -webkit-transform: rotate(-90deg); } }
@keyframes spin90 { 100% { -webkit-transform: rotate(-90deg); transform:rotate(-90deg); } }
如何在不重新加载页面的情况下通过 jQuery 再次播放此动画？
最佳答案
要重播动画，您需要打开/关闭它，所以如果您这样做，您总是在添加之前删除它，然后使用 setTimeout 强制 重绘，否则无效。
$(document).ready(function() {
$("#btn").click(function(e) {
$('.box').css('animation', '');
setTimeout(function() {
$('.box').css('animation', 'spin360 0.1s linear 0s 20 forwards paused, spin360 0.25s linear 2s 8 forwards, spin360 0.5s linear 4s 4 forwards, spin360 1s linear 6s 2 forwards, spin90 2s linear 8s 1 forwards');
}, 5)
});
});.box {
width: 100px;
height: 100px;
background-color: red;
}
@-moz-keyframes spin360 { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin360 { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin360 { 100% { transform: rotate(-360deg); } }
@-moz-keyframes spin90 { 100% { -moz-transform: rotate(-90deg); } }
@-webkit-keyframes spin90 { 100% { -webkit-transform: rotate(-90deg); } }
@keyframes spin90 { 100% { transform: rotate(-90deg); } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="box"></div>
<input type="submit" id="btn" value="spin" />
</body>关于javascript - 如何在 jQuery 的一些迭代后重播 css3 转换动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44736483/