首页 话题 小组 问答 好文 用户 我的社区 域名交易

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

发布于 2024-11-11 19:24:32
0
9

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来实现。

评论
91云脑
Lv.1普通用户

62845

帖子

12

小组

80

积分

站长交流