CSS 动画

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

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

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

• animation 简写属性
• animation-composition (en-US) 实验性
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• animation-timeline (en-US)

• @keyframes

• scroll() (en-US)

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

• animationstart
• animationend
• animationcancel
• animationiteration

• Web Animations API
• AnimationEvent (en-US)
• CSSKeyframeRule (en-US)
• CSSKeyframesRule (en-US)

使用 CSS 动画

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

CSS 动画提示和技巧

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

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

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