[分享]css中如何让帧动画停止

CSS中的帧动画是一种常见的动画效果，但有时候我们需要让它停止。以下是一些方法：

/* 方法一：使用animation-play-state属性 */

.element {
  animation: my-animation 2s infinite;
}

.element.stop {
  animation-play-state: paused;
}

/* 方法二：使用@keyframes规则 */
/* 定义一个空状态 */
@keyframes my-animation {
  0% {}
  100% {
    transform: rotate(360deg);
  }
}

.element {
  animation: my-animation 2s infinite;
}

.element.stop {
  animation-name: none;
} 

以上两种方法都可以让帧动画停止。第一种方法使用了animation-play-state属性，将其设置为paused，可以暂停动画的运行。第二种方法则使用了@keyframes规则，在停止时可以通过将动画名称设置为none来实现。