CSS动画模块

过渡和动画之间的异同

不同：过渡必须人为的触发才会执行，动画不需要人为的触发就可以执行动画

相同：过渡和动画都是给元素添加动画的，都需要满足三要素，才有动画效果

格式：

1.告诉系统需要执行哪个动画

animation-name：xxx；

2.告诉系统需要创建一个名叫xxx的动画

@keyframes xxx{

            from{

                 margin-left：0；

            }

             to{

                 margin-left：500px；

            }

}

3.告诉系统动画持续时长

animation-duration：值；

其它属性

animation-delay：值；（告诉系统延迟多少秒之后开始动画）

animation-timing-function：值；（告诉系统动画的运动速度）

取值：

linear（匀速）

ease（逐渐慢下来）

ease-in（加速）

ease-out（减速）

ease-in-out（先加速后减速）

animation-iteration-count：值；（告诉系统执行几次动画）

animation-direction：值；

取值：

normal - 动画正常播放（向前）。默认值

reverse - 动画以反方向播放（向后）

alternate - 动画先向前播放，然后向后

alternate-reverse - 动画先向后播放，然后向前

Animation-play-state：值；（告诉系统当前动画是否需要暂停）

取值：

running-不暂停（默认）

pause-暂停

animation-fill-mode：值；（指定动画等待状态和结束状态的样式）

取值：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。

forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。

backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。

both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。（元素将保留由最后一个关键帧设置的样式值，将获取由第一个关键帧设置的样式值）

连写格式：

animation：动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画；

简写：

animation：动画名称 动画时长 ；

注意：

1.动画中如果有和默认样式中同名的属性，会覆盖默认样式中同名的属性

2.在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面