CSS animation-play-state 属性

主题

定义和用法

animation-play-state是 CSS 动画属性之一，用于控制动画的播放状态，即指定动画是正在运行还是暂停。

animation-play-state可以单独控制多个动画的播放状态（当使用逗号分隔的多个动画时）。

接下来通过多个实例演示animation-play-state属性的用法，来深化您对animation-play-state属性的理解。

实例代码运行代码

复制

.box {
    animation: slide 2s linear infinite;
    animation-play-state: running; /* 默认值，可省略 */
}

.box:hover {
    animation-play-state: paused;
}

animation-play-state: paused|running;

值	描述
`paused`	规定动画已暂停。
`running`	规定动画正在播放（默认值）。

下表中数字注明了完全支持animation-play-state属性的首个浏览器版本。

带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。


43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

评论区 0

发表评论

教程介绍

CSS 参考手册全面涵盖选择器、盒模型，文本属性等，助您快速检索 CSS 使用方法。

32 章节

10 阅读

0 评论