动画的基本使用

一、动画

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

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

1. 定义：定义使用 @keyframes+动画名字（参考类名）来定义

2. /* 1. 定义的动画 */
   @keyframes dance {
   ​    从一倍放大到1.5倍
       from {
           transform: scale(1)
       }
   ​
       to {
           transform: scale(1.5)
       }
   }

   或者是

3.  /* 1. 定义的动画 */
       @keyframes dance {
   ​
          0% {
           transform: scale(1)
         } 
   ​
         100% {
           transform: scale(1.5)
         }
       }

4. 调用在样式里加入 animation来调用。

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

动画属性

 

1. 动画名字参照css类选择器命名

2. 动画时长和延迟时间别忘了带单位 s

3. infinate 无限循环动画（重复次数）

4. alternate 为反向 就是左右来回执行动画（跑马灯）

5. forwards 动画结束停留在最后一帧状态， 不循环状态使用

6. linear 让动画匀速执行

鼠标经过暂停动画

用于动画重复循环时，需要鼠标经过停止时，用过渡来完成。

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

多组动画

需要多个动画一起执行时，中间有逗号隔开。

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;