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的基本属性