animation 动画

使用动画
div: hover {
animation: 1s 1s 动画名 infinite|| 3(次)forwards reverse alternate;
(几秒)(延时)(名字)(无限循环 或 次数+动画状态) (动画方向) (慢速动画)
}

定义动画
@keyframes 动画名{
0% {background:#ccc}
50%{background:red; width: 300px; height: 100px;}
100%{background:blue; width: 200px; height: 50px;}
}

停止一个无限循环的动画 松开继续running
animation-play-state: paused;
animation-play-state: running;

---以下可以简写---
动画状态
animation-fill-mode
none 回到动画还没开始时的状态
forwards 让动画停留在结束状态
backwards 让动画回到第一帧的状态
both: 根据animation-direction轮流应用forwards和backwards规则

动画方向
animation-direction
normal 正向 默认 从前往后播放动画
reverse 反向 倒播动画

动画延时
animation-delay: 1s;