停止CSS动画，但让其当前迭代结束

  • Z时代
  • 2024-01-10
  • 分类：问答

我有以下HTML：

<div class="rotate"></div>​

以及以下CSS：

@-webkit-keyframes rotate {
  to { 
    -webkit-transform: rotate(360deg);
  }
}
.rotate {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-animation-name:             rotate;
    -webkit-animation-duration:         5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
}​

我想知道是否有一种方法（使用JavaScript）来停止动画，但让它完成当前的迭代（最好通过更改一个或几个CSS属性）。我尝试设置-webkit-

animation-name为空值，但是这会导致该元素以震颤的方式跳回到其原始位置。我也尝试设置-webkit-animation-iteration-

count为，1但是这样做也一样。

回答：

收到animationiteration事件后停止动画。像这样（使用jQuery）：

@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
  }
}
.rotate {
    width: 100px;
    height: 100px;
    background: red;
}
.rotate.anim {
    -webkit-animation-name:             rotate;
    -webkit-animation-duration:         5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
}

<div class="rotate anim">TEST</div>
<input id="stop" type="submit" value="stop it" />

$("#stop").click(function() {
    $(".rotate").one('animationiteration webkitAnimationIteration', function() {
        $(this).removeClass("anim");
    });
});

请注意，我在.one这里使用（不是.on），以便处理程序仅运行一次。这样，以后可以重新启动动画。

以上是 停止CSS动画，但让其当前迭代结束 的全部内容， 来源链接： utcz.com/qa/397748.html

回到顶部