CSS 动画

CSS 动画模块(CSS Animation)可以让你通过使用关键帧对 CSS 属性的值进行动画处理,例如背景位置和变换。每个关键帧都描述了动画元素在动画序列中的某个特定时间应该如何呈现。你可以使用动画模块中的属性来控制动画的持续时间、重复次数、延迟启动等方面。

正在运行的动画

要查看下面方框中的动画,请点击复选框“Play the animation”或将光标悬停在方框上。当动画激活时,顶部的云会改变形状,雪花会落下,底部的雪量会上升。要暂停动画,请取消复选框或将你的光标从盒子上移开。

这个动画示例使用 animation-iteration-count 来使雪片反复落下,animation-direction 使云层来回移动,animation-fill-mode 根据云层的移动来提高雪层,以及animation-play-state来暂停动画。

要查看这个动画示例的源码,请查看 GitHub 仓库上的源码

参考

属性

At 规则

函数

事件

所有动画,包括时间长度为 0 的动画,都会触发动画事件。

接口

指南

使用 CSS 动画

关于如何使用 CSS 创建动画的分步教程,本文介绍每个相关的 CSS 属性和规则,并解释它们如何交互。

CSS 动画提示和技巧

帮助你充分利用 CSS 动画的技巧和窍门。

相关概念

规范

Specification
CSS Animations Level 2
CSS Animations Level 1

参见