CSS animation-duration 属性

CSS animation-duration 属性指定一个动画周期的时长。

默认值为0s,表示无动画。

使用简写属性 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:mymove infinite;
  12. animation-duration:2s;
  13. /* Safari and Chrome */
  14. -webkit-animation:mymove infinite;
  15. -webkit-animation-duration:2s;
  16. }
  17. @keyframes mymove
  18. {
  19. from {top:0px;}
  20. to {top:200px;}
  21. }
  22. @-webkit-keyframes mymove /* Safari and Chrome */
  23. {
  24. from {top:0px;}
  25. to {top: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-duration43.03.0 -webkit-10.016.05.0 -moz-9.04.0 -webkit-30.015.0 -webkit-12.0 -o-

定义和用法

animation-duration 属性定义动画完成一个周期所需要的时间,以秒或毫秒计。

默认值:0
继承性:no
版本:CSS3
JavaScript 语法:object.style.animationDuration="3s"

语法

  1. animation-duration: time;
描述
time规定完成动画所花费的时间。默认值是 0,意味着没有动画效果。(负值无效)

相关页面

CSS3 教程:CSS3 动画

分类导航