1.9 动画
关键帧动画；
@keyframes
- 已定义
<style>
@keyframes test-animation {
from {background: red;}
to {background: yellow;}
}
</style>
- 自定义
<style>
@keyframes test-animation2 {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
</style>
简写
<style>
div {
animation: test-animation 2s ease-in-out 500ms infinite normal backwards running;
}
</style>
单独属性（按顺序）
<style>
div {
animation-name: test-animation;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 500ms;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: backwards;
animation-play-state: running;
}
</style>
- animation-name 动画名称
keyframename 指定要绑定到选择器的关键帧的名称
none 指定有没有动画（可用于覆盖从级联的动画）
- animation-duration 动画时间
s、ms
- animation-timing-function 动画效果
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
- animation-delay 动画延迟
s、ms
- animation-iteration-count 动画次数
n 一个数字，定义应该播放多少次动画
infinite 指定动画应该播放无限次（永远）
- animation-direction 动画方向
normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
- animation-fill-mode 动画属性添加
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
- animation-play-state 运行、暂停
paused 指定暂停动画
running 指定正在运行的动画