您现在的位置是：首页 >技术教程 >CSS3动画网站首页技术教程

CSS3动画

@keyframes 规定动画。动画持续时间的百分比。
animation 所有动画属性的简写属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。

@keyframes animationname {keyframes-selector {css-styles;}} 
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。0-100% from (和0%相同)
to (和100%相同)
css-styles	必需的。一个或多个合法的CSS样式属性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;简写形式

animation-name: keyframename|none; keyframename	指定要绑定到选择器的关键帧的名称

animation-duration: time; 属性定义动画完成一个周期需要多少秒或毫秒。
time	指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|steps(int,start|end)|cubic-bezier(n,n,n,n);
steps(int,start|end)指定了时间函数中的间隔数量（步长）。
第一个参数指定函数的间隔数。 第二个参数可选，表示动画是从时间段的开头连续还是末尾连续。

animation-fill-mode: none|forwards|backwards|both|initial|inherit;
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards from之前的状态与from的状态保持一致
backwards to之后的状态与to的状态保持一致
both 动画遵循 forwards 和 backwards 的规则。动画外的状态与from和to的状态保持一致

animation-delay: time;  定义动画什么时候开始。time以秒或毫秒计。默认值为0

animation-iteration-count: n | infinite; n 定义应该播放n次动画。infinite指定动画应该播放无限次（永远）

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。	
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

animation-play-state: paused|running; 指定动画是否正在运行或已暂停。
paused	指定暂停动画
running	指定正在运行的动画

注意点：
1.animation-timing-function：作用于一个关键帧周期而非整个动画周期
2.animation-iteration-count：只会管理动画内的属性，动画的延迟不会被循环
3.animation-direction：改变关键帧的执行方向，还会影响animation-timing-function的形式