css3 animate基本属性
Css3animate属性
属性 |
描述 |
Css |
Animation |
所有动画属性的简写属性,除了animation-play-state属性 Animation:name duration timing-function delay iteration-count direction; |
3 |
Animation-name |
规定@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的基本属性