CSS 动画

要在下面的框中查看动画，请单击“播放动画”复选框或将光标悬停在框上。当动画处于活动状态时，顶部的云会改变形状，雪花会落下，底部的积雪量会增加。要暂停动画，请取消选中复选框或将光标移出框外。

此示例动画使用animation-iteration-count使雪花反复落下，animation-direction使云来回移动，animation-fill-mode响应云的移动提高积雪量，以及animation-play-state暂停动画。

要查看此动画的代码，请在 GitHub 上查看源代码。

• animation 简写
• animation-composition
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• 动画时间线

• @keyframes

所有动画，即使是持续时间为 0 秒的动画，都会触发动画事件。

• animationstart
• animationend
• animationcancel
• animationiteration

• Web 动画 API
• AnimationEvent
• CSSKeyframeRule
• CSSKeyframesRule

使用 CSS 动画

有关如何使用 CSS 创建动画的分步教程。本文介绍了与动画相关的 CSS 属性和 @规则，以及它们如何相互交互。

使用 Web 动画 API

可以使用几行 JavaScript 解决的常见动画需求。

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

• CSS 滚动驱动的动画
• 过渡 CSS 模块中的属性，用于根据用户操作触发动画
• <canvas> HTML 元素以及canvas API和WebGL API绘制图形和动画
• 用于所有与动画相关的元素接口的SVGAnimationElement接口，包括SVGAnimateElement、SVGSetElement、SVGAnimateColorElement、SVGAnimateMotionElement和SVGAnimateTransformElement