「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」 。
声明（定义）动画
使用动画之前首先要声明（定义）动画
@keyframes move {
from {
transform: translate(0px);
}
to {
transform: translate(600px);
}
}
move是动画的名称，可以按照自己的需求写名字。。 from是从哪开始，to是到哪结束 也可以写0%到100%（中间还可以写10%，20%。。。按照自己的需求写每个阶段）
调用动画
谁做动画给谁调用 例如：div要做动画
div {
width: 100px;
height: 100px;
animation: move 1s infinite;
}
动画的属性：
动画的名称：
animation-name:动画名称；
动画的时长：
animation-duration:动画总共的时长（单位是秒：s）
指需要多长时间才能完成动画 ,如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。
动画何时开始：
animation-delay:动画开始的延迟时间（单位是秒：s）;
动画开始的时间就是浏览器把页面加载出来之后开始计算
负值也是允许的，如果写负值，则打开页面。动画就开始播放如同已经播放了几秒了的状态
动画结束后的状态：
animation-fill-mode: (1)forwards:动画结束后停在结束的位置
(2)backwards:动画结束后回到开始的位置
动画播放次数：
animation-iteration-count:次数；（动画总共播放的次数）
infinite：循环，无止境的播放
动画的速度曲线：
animation-timing-function:
ease:指定从慢速开始，再快，再到慢速结束
ease-in:规定慢速开始的动画
ease-out:规定结束慢速的动画
ease-in-out:规定慢速开始，慢速结束的动画
linear:匀速
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值
动画的执行方向：
animation-direction:
normal:默认值
alternate:逆播
暂停动画：
animation-play-state:
paused:暂停
running:播放
动画的连写：
（1）单个动画的连写：
animation: name duration timing-function delay iteration-count direction;
（2）多个动画的连写(用逗号隔开)：
animation: name1 duration timing-function delay iteration-count direction,name2 duration timing-function delay iteration-count direction
