CSS animation-name 属性

CSS animation-name 属性指定应用的一系列动画,每个名称代表一个由@keyframes定义的动画序列。

使用简写属性 animation 可以很方便地同时设置所有的动画属性。


实例

为 @keyframes 动画规定一个名称:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div
  6. {
  7. width:100px;
  8. height:100px;
  9. background:red;
  10. position:relative;
  11. animation-name:mymove;
  12. animation-duration:5s;
  13. /* Safari and Chrome */
  14. -webkit-animation-name:mymove;
  15. -webkit-animation-duration:5s;
  16. }
  17. @keyframes mymove
  18. {
  19. from {left:0px;}
  20. to {left:200px;}
  21. }
  22. @-webkit-keyframes mymove /* Safari and Chrome */
  23. {
  24. from {left:0px;}
  25. to {left:200px;}
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>
  31. <div></div>
  32. <p><b>注释:</b>始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。</p>
  33. </body>
  34. </html>

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。

属性
animation-name43.04.0 -webkit-10.016.05.0 -moz-9.04.0 -webkit-30.015.0 -webkit-12.0 -o-

定义和用法

animation-name 属性为 @keyframes 动画规定名称。

注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
默认值:none
继承性:no
版本:CSS3
JavaScript 语法:object.style.animationName="mymove"

语法

  1. animation-name: keyframename|none;
描述
keyframename规定需要绑定到选择器的 keyframe 的名称。
none规定无动画效果(可用于覆盖来自级联的动画)。

相关页面

CSS3 教程:CSS3 动画

分类导航