模块

CSS 动画

CSS 动画模块（CSS Animation）可以让你通过使用关键帧对 CSS 属性的值进行动画处理，例如北京位置的变化。每个关键帧描述动画元素在动画序列中的某个特定时间应该如何呈现。可以控制动画的持续实现、 重复次数、延迟启动等方面。

属性：

• animation：简写属性
• animation-composition：描述动画如何与其它动画组合
• animation-delay：定义动画开始前等待的时间
• animation-direction：指定是否应该轮流反向播放动画
• animation-duration：定义动画完成一个周期所花费的秒或毫秒
• animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
• animation-iteeration-count：定义动画应该播放的次数
• animation-name：指定要绑定到选择器的关键帧的名称
• animation-play-state：指定动画是否正在运行或暂停
• animation-timing-function：规定动画的速度曲线
• animation-timeline：指定动画的时序

At 规则

• @keyframes：指定动画名称和动画效果

函数

• scroll

事件

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

• animationstart：在动画开始时触发
• animationend：在动画结束时触发
• animationcancel：在动画取消时触发
• animationiteration：在动画重复播放时触发

接口

• WebAnimationsAPI
• AnimationEvent
• CSSKeyframeRule
• CSSAnimation

指南

• 使用 CSS 动画
• CSS 动画提示和技巧

相关概念

• will-change CSS 属性
• <easing-function>数据类型
• prefers-reduced-motion 媒体查询
• 贝塞尔曲线

参见

• CSS 滚动时间线scroll-timeline-name和scroll-timeline-axis属性，以及scroll-timeline间歇属性，创建与滚动容器的滚动偏移相关的动画。
• CSS 变换模块中的属性根据用户的动作触发动画
• HTML<canvas>元素与canvas API和WebGL API一起用来绘制图形和动画
• 所有动画相关元素的 SVGAnimationElement 接口，包括 SVGAnimateElement、SVGSetElement、SVGAnimateColorElement、SVGAnimateMotionElement 以及 SVGAnimateTransformElement。