「这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战」
这篇还是写有关于animation的描写，animation有一点不足之处，我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，可以使用js操作，就像前面我学的lottie-web，这个插件实现动画就非常的完美。虽然说Animation制作出来的动画简单粗糙，但我想还是不能减少我们大家对其学习的热情。
和transition差不多，他可以填写两个、三个、四个。。。参数，都可以执行动画
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;
可以看到，上面有多种实现，可以在编辑器里面运行试试。
一般来说，我都是会把名字放到前面，这样会更容易找一点。
animation: slidein 3s;
这个动画的名字是自己定义的
需要使用到@keyframes，@keyframes,叫做“关键帧”，下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作，这样我们用Transition就很难实现了，但是利用这个@keyframes，我们就可以比较轻松的实现。
@keyframes slidein
{
from {left:0px;}
to {left:200px;}
}
animation: slidein 3s;
上面这样一个动画就形成了，不过这只会执行一次，left从0px到200px 3s内走完，如果需要一直走的话，可以添加多一个属性，infinite
animation: slidein 3s infinite;
我们可以制定各种动画效果，比transtion更好控制，比如，写动画的时候，还可以使用百分比，但是需要注意的是0%不可以省略百分号。
@keyframes photo-white {
0% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
animation: photo-white 10s;
这个动画就是，进来的时候，opacity从0%到75%，透明到完全展示，75%到100%， 从完全展示到消失，按上面给的时间就是0秒到7.5s透明到完全展示，7.5s到10s是完全展示到消失。
如果0%或100%不指定关键帧，将使用该元素默认的属性值
@keyframes photo-white {
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
还有的就是，animation可以给多个动画，只要用逗号分割开就行了
@keyframes arrow-up-down {
0% {
transform: translateY(0)
}
50% {
transform: translateY(-0.15rem)
}
100% {
transform: translateY(0)
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
animation: arrow-up-down 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite,
fade-in 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) 1;
