css动画（3）

「这是我参与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;
复制代码