在此页

• 参考
• 指南
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

CSS 动画 is a module of CSS that lets you animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes.

参考

CSS 特性

• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function

CSS At-rules

• @keyframes

指南

检测 CSS 动画支持

Describes a technique for detecting if a browser supports CSS animations.

使用 CSS 动画

Step-by-step tutorial about how to create animations using CSS. This article describes each relevant CSS property and at-rule and explains how they interact with each other.

CSS animations tips and tricks

Tips and tricks to help you get the most out of CSS animations. Currently offers a technique for replaying an animation which has already run through to completion, which the API doesn't support inherently.

规范

规范	状态	注释
CSS 动画	工作草案	初始定义。

浏览器兼容性

animation property

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
animation	Chrome 完整支持 43	Edge 完整支持 12	Firefox 完整支持 16 完整支持 16 Prefixed Implemented with the vendor prefix: -webkit- 完整支持 Prefixed Implemented with the vendor prefix: -webkit- Disabled layout.css.prefixes.webkit preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 完整支持 5 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE 完整支持 10	Opera 完整支持 30 完整支持 30 Prefixed Implemented with the vendor prefix: -webkit- 不支持 12.1 — 15 不支持 12 — 15 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari 完整支持 9	WebView Android 完整支持 43 完整支持 43 完整支持 2 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 animation-fill-mode property is not supported in Android browsers below 2.3.	Chrome Android 完整支持 43	Firefox Android 完整支持 16 完整支持 16 Prefixed Implemented with the vendor prefix: -webkit- 完整支持 Prefixed Implemented with the vendor prefix: -webkit- Disabled layout.css.prefixes.webkit preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 完整支持 5 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 完整支持 30 完整支持 30 Prefixed Implemented with the vendor prefix: -webkit- 不支持 12.1 — 14 不支持 12 — 14 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 4.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• Related to CSS Animations, CSS Transitions can trigger animations based on user actions.

元数据

• 最后修改： Jul 7, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS 动画
4. 指南

   1. CSS 动画提示和技巧
   2. 检测 CSS 动画支持
   3. 使用 CSS 动画
5. At-Rules

   1. @keyframes
6. 特性

   1. <custom-ident>
   2. animation
   3. animation-delay
   4. animation-direction
   5. animation-duration
   6. animation-fill-mode
   7. animation-iteration-count
   8. animation-name
   9. animation-play-state
   10. animation-timing-function