Css3animate屬性css
屬性web |
描述動畫 |
Cssspa |
Animationorm |
全部動畫屬性的簡寫屬性,除了animation-play-state屬性事件 Animation:name duration timing-function delay iteration-countci direction;animation |
3it |
Animation-nameio |
規定@keyframes動畫的名稱。 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 |
Css3@keyframes規則
語法:
@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的基本屬性