动画

过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的；而animation则是通过关键帧@keyframes来实现更为复杂的动画效果。

动画的实现步骤

1. 定义动画：用关键帧声明动画

   关键帧的语法是以@keyframes开头，后面紧跟着动画名称animation-name。from等同于0%，to等同于100%。百分比跟随的花括号里面的代码，代表此时对应的样式

   语法：

   @keyframes  animation-name {
      /* 开始状态 */
     frome {}
      /* 结束状态 */
     to {}
   }
   
    @keyframes animation-name {
               /* 开始状态  0%不可以省略百分号*/
               0% {}
   
               n% {}
   
                /* 结束状态 */
               100% {}
           }
   
   

   注意：

   1. 百分比顺序不一定非要从0%到100%排列，最终浏览器会自动按照0%-100%的顺序进行解析
   2. 如果存在负百分数或高于100%的百分数，则该关键帧将被忽略
   3. 如果0%或100%不指定关键帧，将使用该元素默认的属性值
   4. 若存在多个相同animation-name的@keyframes，浏览器只识别最后一个@keyframes里面的值
   5. 空的keyframes规则是有效的，它们会覆盖前面相同animation-name的有效关键帧规则

2. 使用动画：animation调用动画

   语法：

   animation: name duration timing-function delay iteration-count direction fill-mode; animation: 动画名 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

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

   取值不分先后顺序

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

动画属性值

 /* 调用动画的名称 */
            animation-name: move;
            /* 动画播放时长 */
            animation-duration: 1s;
            /* 动画重复播放次数 默认1次 infinite：无限循环播放*/
            animation-iteration-count: infinite;
            /* 动画延迟多久才开始播放 默认0s*/
            animation-delay: 1s;
            /* 动画结束时停在的状态
            backwards:第一帧
            forwards：最后一帧
             */
            animation-fill-mode: forwards;
            /* 动画方向    alternate 反方向播放 */
            animation-direction: alternate;
            /* 动画速度曲线  linear匀速; */
            animation-timing-function: linear;
            /* 动画进行状态 running 进行  ，paused为暂停，通常配合:hover使用*/
            animation-play-state: paused;

animation-name

• 描述

  动画名称

• 取值

  默认值：none

  自定义动画名称

  注意：

  1. 如果多个动画试图修改相同的属性，那么动画列表的后面覆盖前面
  2. 如果动画的其他7个子属性和动画名称的长度不同，动画名称列表的长度决定最终的长度，多余的值无余，缺少的值按照顺序进行重复

animation-duration

• 描述

  完成一次动画的时长

• 取值

  默认值：0s

  0s意味着动画没有时间，持续时间不能为负值

animation-iteration-coun

• 描述

  动画重复播放次数

• 取值

  默认值：1

  infinite:无限次动画

  可以是整数也可以小数，但不能是0和负数。

animation-delay

• 描述

  动画延迟多久才开始播放

• 取值

  默认值：0s

  只在动画开始时进行一次时间延迟

  如果该值是负值，则表示动画的起始时间从0s变为延迟时间的绝对值

animation-fill-mode

• 描述

  动画结束时停在的状态

• 取值

  默认值：none

  1. none: 动画结束后，元素移动到初始状态

     注意:初始状态并不是指0%的元素状态，而是元素本身属性值

  2. forwards: 元素停在动画结束时的位置

     注意:动画结束时的位置并不一定是100%定义的位置，因为动画有可能反向运动，也有可能动画的次数是小数

  3. backwards:在animation-delay的时间内，元素立刻移动到动画开始时的位置。若元素无animation-delay时，与none的效果相同

     注意:动画开始时的位置也不一定是0%定义的位置，因为动画有可能反向运动。

  4. both: 同时具有forwards和backwards的效果

animation-direction

• 描述

  动画方向 ，用来定义动画是否反向播放

• 取值

  默认值：normal

  值	描述
  normal	正向播放
  reverse	反向播放
  alternate	若动画只播放一次，则和正向播放一样。若播放两次以上，偶数次效果为反向播放
  alternate-reverse	若动画只播放一次，则和反向播放一样。若播放两次以上，偶数次效果为正向播放

animation-timing-function

• 描述

  动画速度曲线

• 取值

  默认值：ease

animation-play-state

• 描述

  动画播放状态

• 取值

  默认值：running

  running表示播放中

  paused表示动画暂停,通常配合:hover使用