动 画

1，动画的基本使用

动画（animation）是CSS3中具有颠覆性的特征之一，可通过多个节点来精确控制一个或一组动画，常用来实现赋值的动画效果

相比较过渡，动画可以实现更多变化、控制、连续自动播放等效果

制作动画分为两步：

1，先定义动画

2，再使用（调用）动画

        1，用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称{

        0%{

                width：100px；

        }

        100%{

                width200px；

        }

}

        from 和 to等价于 0% 和100%

        2，元素使用动画

div{

        width：20px；

        height：200px；

        background-color：pink；

        调用动画

        animation-name：动画名称；

        持续时间

        animation-duration：持续时间；

} 

3， 动画序列：

1，可以做多个状态的变化 keyframe 关键帧

2，里面的百分比要是整数

3，里面的百分比就是总时间的划分

2，动画属性

animation-name：move；                动画名称

animation-duration：2s；                 持续时间

animation-timing-function：ease；   运动曲线

animation-delay：0s；                      何时开始

animation-iteration-count：0；        重复次数（infinite无穷）

animation-direction：normal；          是否反方向播放（alternate反方向）

animation-fill-mode：backwards（回到起始 )； 动画结束后的状态 forwards 停留在结束

animation-play-state：running；       鼠标经过动画是否在运行或暂停 paused（暂停）

速度曲线 animation-timing-function细节：

ease                默认，动画以低速开始，然后加快，在结束前变慢

 ease-in           动画以低速开始

ease-out          动画以低速结束

ease-in-out      动画以低速开始和结束

linear               动画从头到尾的速度是相同的。匀速

steps（）        指定了时间函数中的间隔数量（步长） 

 3，动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态

animation：name duration timing-function delay iteration-count direction fill-mode；

animation：move 5s ease 2s infinite alternate ；

 简写属性里面不包括animation-play-state，常和鼠标经过等其他配合使用