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

属性：

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

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

3. infinate 无限循环动画

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

5. forwards 动画结束停留在最后一帧状态

6. linear 让动画匀速执行

 

使用

  1、定义：

@keyframes 变量名 {
    from{
        }
    to{
       }
    }   

 from表示开始  to表示结束    from 和 to  可以用百分比替换

        2、调用

变量名{
   animation: 变量名 .5s infinite;
}

多组动画使用： 多组动画中用逗号隔开

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

鼠标经过暂停动画：animation-play-state: paused;