动画（重点）~~~~~

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

/* 1. 定义的动画 */ @keyframes dance {

from {
    transform: scale(1)
}

to {
    transform: scale(1.5)
}

}

或者

/* 1. 定义的动画 */
    @keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

2 调用 ​

img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

​​​

1. 动画名字参照css类选择器命名
2. 动画时长和延迟时间别忘了带单位 s
3. infinate 无限循环动画
4. alternate 为反向 就是左右来回执行动画（跑马灯）
5. forwards 动画结束停留在最后一帧状态
6. linear 让动画匀速执行 1.1 鼠标经过暂停动画

​

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

​ 1.2  多组动画

/* 我们想要2个动画一起执行 animation: 动画1, 动画2, ... 动画n */

animation: run 1s steps(12) infinite, move 5s linear forwards;