css3 animation 动画属性简介

animation 动画属性介绍

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

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

语法：animation-name: keyframename|none；

Keyframename：规定需要绑定到选择器的 keyframe 的名称。

None： 规定无动画效果（可用于覆盖来自级联的动画）。

例如：

{

-webkit-animation-name: my_animation;

-moz-animation-name：my_animation;

-ms-animation-name：my_animation;

-o-animation-name: my_animation;

animation-name: my_animation;

}

@-webkit-keyframes my_animation{}

@-moz-keyframes my_animation{}

@-ms-keyframes my_animation{}

@-o-keyframes my_animation{}

@keyframes my_animation{}

2. animation-duration----规定完成动画所花费的时间，以秒或毫秒计。

语法：animation-duration: time;

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

例如：

{

-webkit-animation-duration: 2s;

-moz-animation-duration：2s;

-ms-animation-duration：2s;

-o-animation-duration: 2s;

animation--duration: 2s;

}

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

语法：animation-timing-function: value;

Value值:

linear：动画从头到尾的速度是相同的。

ease：默认。动画以低速开始，然后加快，在结束前变慢。

ease-in：动画以低速开始。

ease-out ：动画以低速结束。

ease-in-out：动画以低速开始和结束。

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

例如：

{animation-timing-function:linear;}

{animation-timing-function:ease;}

{animation-timing-function:ease-in;}

{animation-timing-function:ease-out;}

{animation-timing-function:ease-in-out;}

4. animation-delay----规定在动画开始之前的延迟

语法：animation-delay: time;

Time值：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

{

animation-delay:2s;

-webkit-animation-delay:2s;

}

5. animation-iteration-count----规定动画应该播放的次数

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

n：定义动画播放次数的数值。

infinite：规定动画应该无限次播放。默认值为：1。

示例：

{

animation-iteration-count:infinite;

-webkit-animation-iteration-count:infinite;

}

6. animation-direction----规定是否应该轮流反向播放动画

语法：animation-direction: normal|alternate;

normal：默认值。动画应该正常播放。

alternate ：动画应该轮流反向播放。

注释：如果把动画设置为只播放一次，则该属性没有效果。

示例：

{

animation-direction:alternate;

-webkit-animation-direction:alternate;

}

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

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

paused：规定动画已暂停。

running：规定动画正在播放。

注释：可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

示例：

{

animation-play-state:running;

-webkit-animation-play-state:running;

}

8. animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见

语法：animation-fill-mode : none | forwards | backwards | both;

none：不改变默认行为。

forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both ：向前和向后填充模式都被应用。