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 动画的技巧和窍门。
相关概念
will-change
CSS 属性<easing-function>
数据类型prefers-reduced-motion
媒体查询- 术语贝塞尔曲线
规范
Specification |
---|
CSS Animations Level 2 |
CSS Animations Level 1 |
参见
-
实验性
CSS 滚动时间线
scroll-timeline-name
和scroll-timeline-axis
属性,以及scroll-timeline
简写属性,创建与滚动容器的滚动偏移相关的动画。 - CSS 变换模块中的属性根据用户的动作触发动画。
- HTML
<canvas>
元素与 canvas API 和 WebGL API一起用来绘制图形和动画。 - 所有动画相关元素的
SVGAnimationElement
接口,包括SVGAnimateElement
、SVGSetElement
、SVGAnimateColorElement
、SVGAnimateMotionElement
以及SVGAnimateTransformElement
。