animation动画效果

---

        /* 过渡只能使用伪类选择器触发一次，动画可以一直动态展示 */
        /* 使用animation添加动画效果 */
        /* 
        1.定义动画 （@keyframes不是选择器，是一种特殊的语法叫做定义动画关键帧）
                   @keyframes 动画名称{             
                   from{}
                   to{}
                   }

                   @keyframes 动画名称{
                   0%{}
                   10%{}
                   15%{}
                   100%{}
                   }
         2.使用动画  
                    animation：名称 时长 次数;
                    animation属性连写：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
          注意：
               动画名称和动画时长必须赋值
               取值不分先后顺序
               如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
               /* 
               1.动画连写属性没有顺序限制
                 如果动画执行时间和延迟时间同时出现，写在前面的是
                 执行时间，写在后面的是延迟时间
                 2.
                 速度曲线中的匀速 linear
                 播放次数中的无限次播放infinite
                 反向播放动画alternate
                 动画停留在结束位置forwards  
               */

/* 使用animation添加动画效果 */

    div {
        width: 200px;
        height: 200px;
        background-color: #ff9b9b;
        animation: move 3s 3s linear infinite alternate;
    }

    @keyframes move {
        10% {
            background-color: aqua;
        }

        30% {
            background-color: aquamarine;
        }

        50% {
            background-color: beige;
        }

        80% {
            background-color: bisque;
        }

        100% {
            background-color: blueviolet;
        }
    }

• 一个元素添加多个动画效果用逗号分隔

•                                 语法animation:
                                           动画1，
                                           动画2，
                                           动画N
  

动画属性
              目标：使用animation相关属性控制动画执行过程
                      属性             作用                   取值

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