如何重播CSS3在jQuery进行了一些迭代后转换动画

我的图像上有此动画：

<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再次播放此动画？

尝试示例：https：//jsfiddle.net/rzqcc2bsh/1/

要重播一个动画，您需要打开/关闭它，因此，如果您喜欢这样，在添加之前始终将其删除，然后使用setTimeout强制A redraw ，否则它将无法使用。

$(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>

相关内容

最新更新

热门标签：