Javascript 如何通过jQuery在一些迭代之后重放css3变换动画

我的图像上有此动画：

<div class="image_for_sping">
    <img src="/anyimage.png">
</div>

此动画的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再次播放此动画而无需重新加载页面

---

尝试示例：

要重播动画，您需要将其打开/关闭，因此如果您这样做，您总是在添加动画之前将其删除，然后使用

设置超时来强制重画，否则它将无法工作


$（文档）.ready（函数（）{
$（“#btn”）。单击（功能（e）{
$（'.box'）.css（'动画'，''）；
setTimeout（函数（）{
$（'.box'）.css（'animation'，'spin360 0.1s线性0s 20向前暂停，spin360 0.25s线性2s 8向前，spin360 0.5s线性4s 4向前，spin360 1s线性6s 2向前，spin90 2s线性8s 1向前'）；
}, 5)
});
});
.box{
宽度：100px；
高度：100px；
背景色：红色；
}
@-moz关键帧旋转360{100%{-moz变换：旋转（-360度）；}
@-webkit关键帧旋转360{100%{-webkit变换：旋转（-360度）；}
@关键帧旋转360{100%{变换：旋转（-360度）；}
@-moz关键帧旋转90{100%{-moz变换：旋转（-90度）；}
@-webkit关键帧旋转90{100%{-webkit变换：旋转（-90度）；}
@关键帧旋转90{100%{变换：旋转（-90度）；}}
通常在元素上打开/关闭类。请提供一个工作代码片段，以便我们了解完整情况
@-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); } }