定义动画
用 keyframes 定义动画（类似定义类选择器）
动画序列
- 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列；
- 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐变为新样式的动画效果；
- from 和 to 等同于 0% 和 100%；
@keyframes 动画名称 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
也可以写多个状态，从 0% 到 100% 都可以，里面的百分比就是对总的时间的划分，必须是整数，例如：
@keyframes 动画名称 {
0% {
transform: translate(0px,0px);
}
25% {
transform: translate(1000px,0px);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0px,500px);
}
100% {
transform: translate(0px,0px);
}
}
调用动画
在 CSS 中要用动画的元素中写入：
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 时间（单位：s）;
动画常见属性
| 属性 | 描述 | 默认 |
|---|---|---|
| @keyframes | 规定动画 | - |
| animiation | 所有动画的简写属性，除了 animation-play-state 属性 | - |
| animiation-name | 规定 @keyframes 动画的名称 | - |
| animiation-duration | 规定动画一个周期所花费的秒或毫秒 | 0 |
| animiation-timing-function | 规定动画的速度曲线 | ease |
| animiation-dalay | 规定动画何时开始 | 0 |
| animiation-iteration-count | 规定动画播放的次数 （infinite 为循环） | 1 |
| animiation-direction | 规定动画在下一周期逆向播放 ( alternate 为逆播放 ) | normal |
| animiation-play-state | 规定动画正常运行或暂停 （paused 为暂停） | running |
| animiation-fill-mode | 规定动画结束后状态 （forwards 为保持） | backwards （ 回到起始） |
简写
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态;
ps: 必须按顺序
举例：
animation: move 5s linear 2s infinite alternate;
linear 为匀速；
不写就按默认来，前两个属性不能省略；
用 @keyframes 实现热点图代码链接：
https://blog.csdn.net/Web_blingbling/article/details/108514085