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;

值 描述

keyframename	规定需要绑定到选择器的 keyframe 的名称。
none	规定无动画效果（可用于覆盖来自级联的动画）。

 

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

 

语法：animation-duration: time;

值 描述

time	规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

 

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

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

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

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

 

语法：animation-timing-function: value;

 

值 描述  

linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

 

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

 

语法：animation-delay: time;

值 描述  

time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。

 

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

 

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

值 描述  

n	定义动画播放次数的数值。
infinite	规定动画应该无限次播放。

 

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

 

语法：animation-direction: normal 或 alternate

值 描述

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;

值 描述  

paused	规定动画已暂停。
running	规定动画正在播放。