WEB学习——css动画-animation各个属性详解

css动画-animation各个属性详解

一、动画属性包括：

1. animation-name ：指定要绑定到选择器的关键帧的名称。<定义动画名称>
2. animation-duration ：定义动画完成一个周期需要多少秒或毫秒<定义动画时长>
3. animation-timing-function ：指定动画将如何完成一个周期。<定义速度>
4. animation-delay ：属性定义动画什么时候开始。<定义动画是否延迟播放/立马开始>
5. animation-iteration-count ：定义动画应该播放多少次。<定义次数（可循环值infinite）>
6. animation-direction ：定义是否循环交替反向播放动画。
7. animation-fill-mode ：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
8. animation-play-state ：指定动画是否正在运行或已暂停。
9. animation的简写 : animation: name duration timing-function delay iteration-count direction fill-mode play-state;

二、animation-timing-function的相关属性

1. linear : 动画从头到尾的速度是相同的。<匀速运动>
2. ease : 默认。动画以低速开始，然后加快，在结束前变慢。 <慢快慢>
3. ease-in : 动画以低速开始
4. ease-out : 动画以低速结束
5. ease-in-out : 动画以低速开始和结束。
6. cubic-bezier(n,n,n,n) : 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。; cubic-bezier(n,n,n,n)称为三次贝塞尔曲线，速度曲线。; cubic-bezier(n,n,n,n)曲线定制网站地址：http://cubic-bezier.com/#.23,.66,.76,.52
7. step-start : 在变化过程中，都是以下一帧的显示效果来填充间隔动画
8. step-end : 在变化过程中，都是以上一帧的显示效果来填充间隔动画
9. steps() : 可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数来决定显示效果。第二个参数设置后其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。