CSS animation 属性

CSS animation 属性是 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。


实例

使用简写属性,将动画与 div 元素绑定:

  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 5s infinite;
  12. -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
  13. }
  14. @keyframes mymove
  15. {
  16. from {left:0px;}
  17. to {left:200px;}
  18. }
  19. @-webkit-keyframes mymove /*Safari and Chrome*/
  20. {
  21. from {left:0px;}
  22. to {left:200px;}
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
  28. <div></div>
  29. </body>
  30. </html>

浏览器支持

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

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

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

定义和用法

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
默认值:none 0 ease 0 1 normal
继承性:no
版本:CSS3
JavaScript 语法:object.style.animation="mymove 5s infinite"

语法

  1. animation: name duration timing-function delay iteration-count direction;

animation 属性也可以指定多组动画,每组之间用逗号相隔。

每组动画规定的属性如下:

以下属性出现0次或1次:

  • <single-transition-timing-function>
  • <single-animation-iteration-count>
  • <single-animation-direction>
  • <single-animation-fill-mode>
  • <single-animation-play-state>

animation 的 name 值可能是:none,<custom-ident>, <string>

<time> 可能会出现0、1 或 2 次

每个动画定义中的属性值的顺序很重要:可以被解析为 <time> 的第一个值被分配给animation-duration, 第二个分配给 animation-delay。

每个动画定义中的值的顺序,对于区分 animation-name 值与其他关键字也很重要。解析时,对于除 animation-name 之外的有效的关键字,必须被前面的简写中没有找到值的属性所接受。此外,在序列化时,animation-name 与以及其他属性值做区分等情况下,必须输出其他属性的默认值。

描述
animation-name规定需要绑定到选择器的 keyframe 名称。。
animation-duration规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。

相关页面

CSS3 教程:CSS3 动画

分类导航