css3动画系列之animation 属性

我就是停不下来 2014-01-16

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规定动画正在播放。

相关推荐