动画

过渡与动画的效果不同：

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）。

过渡：实现2个状态间的变化过程。

属性 ：animation

1. 动画实现步骤

• 定义动画：

  @keyframes 动画名称{
      from{}
      to{}
  }
  
  /* 或者 */
  
  @keyframes 动画名称{
      0%{}
      10%{}
      15%{}
      100%{}
  }
  /* 百分比对动画整体时间进行划分*/
  

• 使用动画

  animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态；
  

注意事项:

1. 动画名称和动画时长必须赋值

2. 取值不分先后顺序

3. 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间.

2. 速度曲线

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。

3. 动画属性

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animaton-fill-mode	动画执行完毕时状态	forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function	速度曲线	steps(数字) ：逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向
animation-play-state	暂停动画	paused为暂停，通常配合 :hover使用

• 逐帧动画：animation-timing-function: steps(N)；

  N: 将动画过程等分成N份。

4. 制作精灵图

1. 准备显示区域

   • 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图.

2. 定义动画

   • 改变背景图的位置（移动的距离就是精灵图的宽度）.

3. 使用动画

   • 添加速度曲线steps(N)，N与精灵图上小图个数相同.

   • 添加无限重复效果.

5. 实现动画暂停效果

img {
     /* 2. 调用动画 */
     animation: rotate 1s infinite linear;
   
img:hover {
     /* 鼠标经过暂停动画  */
     animation-play-state: paused;
     }
   
 /* 1. 定义动画 */
@keyframes rotate {
     to {
       transform: rotate(1turn);
       }
}