动画keyframes

动画可以不需要用鼠标触发，自动重复执行变形。

1.使用动画需要先定义动画：

@keyframes move{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(500px);
    }
}

或者可以用百分比表示：

@keyframes move {
       0% {
        transform: translateX(0)
    } 

      100% {
        transform: translateX(500px)
      }
 }

2.调用动画

img {
    width: 200px;
    animation: move .5s infinite;
}

动画属性

• 动画名字参照css类选择器命名
• 动画时长和延迟时间别忘了带单位 s
• infinate 无限循环动画（重复次数）
• alternate 为反向 就是左右来回执行动画（跑马灯）
• forwards 动画结束停留在最后一帧状态， 不循环状态使用
• linear 让动画匀速执行

暂停动画

animation-play-state: paused;

多组动画一起执行

animation: 动画1, 动画2, ... 动画n； （非原创，仅作为学习笔记）