动画模块

动画模块需要使用一定格式来实现。

1、@keyframes 动画名称{

      from{}

      to{}

}

2、使用百分比实现

@keyframes 动画名称{

   0%{}

   50%{}

  100%{}     

}

动画属性

1、animation-name:动画名称；

2、animation-duration:动画持续时间；

3、animation-timing-function:规定动画运动速度。

      取值为：linear，匀速运动；

                     ease，低速开始，之后加速，再减速；

                     ease-in，以低速开始；

                     ease-out，以低速结束；

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

4、animation-delay:动画延迟时间；

5、animation-iteration-count：动画循环次数；

6、animation-direction：动画播放方向。

     取值为：normal，正常方向；

                    alternate，以反方向播放动画。

7、animation-play-state：规定动画播放与暂停。

      取值为：running，动画默认播放；

                     paused，动画默认停止。

8、animation-fill-mode：设定动画模式。

      取值为：none，不改变默认行为；

                     forwards，当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）；

                     backwards，在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）；

                     both，向前和向后填充模式都被应用，是forwards和backwards的结合。