css3动画系列之animation 属性

animation与@keyframes同时使用才可起作用,这里详细介绍下animation的所有用法：

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-play-state: paused|running;

下面详细介绍下各动画属性的用法：

1、animation-name：规定需要绑定到选择器的 keyframe 名称

语法：animation-name: keyframename|none;

2、animation-duration：定义动画完成一个周期所需要的时间，以秒或毫秒计。

语法：animation-duration: time;

3、animation-timing-function：规定动画的速度曲线。

animation-timing-function 规定动画的速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

语法：animation-timing-function: value;

4、animation-delay:规定动画开始之前的延迟。

语法：animation-delay: time;

5、animation-iteration-count:定义动画的播放次数。

语法：animation-iteration-count: n|infinite;

6、animation-direction：定义是否应该轮流反向播放动画。

语法：animation-direction: normal 或 alternate

简写例子：

div{

  width: 200px;

  height: 200px;

  margin:0 auto;

  background:red;

  animation:case 5s  linear  1s   infinite  alternate;

}

 @keyframes case

{

      from{ background:red }

          to{ background:blue }

}

7、animation-play-state 属性规定动画正在运行还是暂停。

语法：animation-play-state: paused|running;