你的位置:首页 > 网页设计

[网页设计]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 :向前和向后填充模式都被应用。