Css3的animation动画

开发工具与关键技术：DW Css3
作者：李明润
撰写时间：2019年2月20号
Animation动画
Css3 为Animatin 动画提供了几个属性:
(1) animation-name: 指定动画的名称，该属性指定了一个已有的关键帧定义。
(2) animation-duration: 指定动画的持续时间。
(3) animation-timing-fution: 指定动画的变化速度（或动画播放方式）。
(4) animation-dely: 指定动画要延长多长时间才开始执行。
(5) animation-iteration-coun: 指定动画的循环执行次数。
(6) animation:是一个复合属性，是前面几个属性的集合。
该属性的个是为
animation:animation-name animation-duration animation-timing-funciotn animation-delay animation-iteration-count.

（一）动画的关键帧（keyframes）: 计算机动画术语
关键帧——相当于二维动画中的原画
关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。
keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
在一个“@keyframes”中的样式规则可以由多个百分比构成的，
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动 画效果的元素加上不同的样式，
“@keyframes”定义的动画名称。
格式：@keyframes 动画名称 {代码体}


（二）animation-timing-function设置动画播放方式
（1）ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。
（2）linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。
（3）ease-in:动画开始的速度较慢，然后速度加快。
（4）ease-out:动画开始的速度很快，然后速度减慢。
（5）ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.
（三）animation-iteration-count定义动画的播放次数
（1）其值通常为整数，但也可以使用带有小数的数字，其默认值为1，
（2）如果取值为infinite，动画将会无限次的播放。
（四）animation-direction属性：主要用来设置动画播放方向.
其主要有两个值：normal、alternate
（1）normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
（2）另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

（五）animation-play-state属性：主要用来控制元素动画的播放状态。
参数：
其主要有两个值：running和paused。
（六）animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。
主要具有四个属性值：none、forwards、backwords和both。
其四个属性值对应效果如下。
（1）none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
（2）forwards:表示动画在结束后继续应用最后的关键帧的位置
（3）backwards:会在向元素应用动画样式时迅速应用动画的初始帧
（4）both:元素动画同时具有forwards和backwards效果
对于在设置动画是所需要的图片的摆放位置的确定，我们可以用
transform属性
deg 表示度数




动画播放过程我就不用视频显示了，这是几张不同时间段的图片