1. 程式人生 > >css3 animate基本屬性

css3 animate基本屬性

webkit select 完成 bsp state mst ng- 描述 iteration

Css3animate屬性

屬性

描述

Css

Animation

所有動畫屬性的簡寫屬性,除了animation-play-state屬性

Animation:name duration timing-function delay iteration-count

direction;

3

Animation-name

[email protected]

animation-name:keyframename|none

3

Animation-duration

規定完成一個周期所花費的秒或毫秒。默認是0;

Animation-duration:time;

3

Animaion-timing--function

規定動畫的速度曲線。默認是ease。

3

Animation-delay

規定動畫何時開始。默認是0

Animation-delay:time

3

Animation-iteration-count

規定動畫被播放的次數。默認是1.

Animation-iteration-count:n|infinite

3

Animation-direction

規定動畫是否在下一周期逆向的播放。默認是normal。

Normal是默認值。動畫應該正常播放

Alternate動畫應該輪流反向播放

3

Animation-play-state

規定動畫是否正在運行或暫停,默認值是”running”。

Animation-play-state:paused|running;

Paused:規定動畫已暫停

Running:規定動畫正在播放

3

[email protected]

語法:

@keyframe animationname{keyframes-selector{css-styles;}}

描述

Animationname

必需,定義動畫的名稱

Keyframes-selector

必需。動畫時長的百分比。

合法值:0-100%

From(與0%相同)

To(100%相同)

Css-styles

必需。一個或多個合法的css樣式屬性

定格動畫

描述

Animationend

當animation執行完成後js調用的事件

Animationend

Moz內核

webkitanimationEnd

Webkit內核

oaimationEnd

Opera內核

MSAnimationEnd

Ie內核

描述

Transitionend

當transition執行完成之後js調用的事件

Transitionenf

Moz內核

webkittransitionEnd

Webkit內核

otransitionEnd

Opera內核

MSTransitionEnd

IE內核

以上是animate的基本屬性

css3 animate基本屬性