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