css 动画使用简述

在下月亮有何贵干

已于 2022-05-27 10:53:36 修改

阅读量213

点赞数 1

分类专栏： css 知识总结文章标签： css 动画 css3

于 2022-05-27 10:53:01 首次发布

本文链接：https://blog.csdn.net/weixin_43877799/article/details/124998693

版权

css 知识总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

实际上在大前端工作中，很多动画都不用自己手动实现，很多组件已经有了自己的动画，但是奈何面试会考，于是记录一下 css 动画如何使用，有个印象。

keyframes关键帧

要想记住一个概念关键字，最好用的方法就是记住它的中文意思，关键帧，我们都知道动画是一帧一帧实现的，两者关联有了你就记住 keyframes 关键帧是用于 css 实现动画使用的了。

@keyframes changeBack ，右边的 changeBack 就是关键帧的名字，我们想要做个修改背景颜色的动画。
在关键帧动画中，我们可以设置属性的状态，用百分比来表示动画进行的时间，以下就表示一开始背景是红色，最后的时候背景是蓝色，表示从红色到蓝色转变的动画。

    <style>
        @keyframes changeBack {
            0% {
                background-color: red;
            }

            100% {
                background-color: blue;
            }
        }
    </style>

使用关键帧

我们创造了关键帧，总得有消费者使用吧，于是我们创建一个div标签来使用它。

使用的时候用的是 animation，动画的意思，也很好记，然后把关键帧的名字和动画的时长放上去，我们搞个5s方便观察。

<style>
    @keyframes changeBack {
        0% {
            background-color: red;
        }

        100% {
            background-color: blue;
        }
    }

    #box {
        width: 100px;
        height: 100px;
        animation: changeBack 5s;
    }
</style>

<body>
<div id="box"></div>
</body>>

在这里插入图片描述

多段关键帧

我们不止可以在开头和结尾搞关键帧，关键帧可以有很多个。

另外 0% 和 100% 可以用 from 和 to 来代替。

<style>
    @keyframes changeBack {
        from {
            background-color: red;
        }

        33% {
            background-color: yellow;
        }

        66% {
            background-color: green;
        }

        to {
            background-color: blue;
        }
    }

    #box {
        width: 100px;
        height: 100px;
        animation: changeBack 10s;
    }
</style>

<body>
<div id="box"></div>
</body>>

在这里插入图片描述

动画运行次数

我们发现运行到最后我们的盒子又没有颜色了，因为我们动画只运行了一次，结束之后，动画消失，我们的盒子一开始没有颜色，所以结束也没有颜色，我们可以设置次数，让动画运行多次或者一直运行。

只要在 animation 设置秒数之后设置次数即可。

当然最常用的还是一直运行，infinite，无限次数。

<style>
    #box {
        width: 100px;
        height: 100px;
        
        /*表示运行两次*/
        /*animation: changeBack 5s 2; */
        
        /*表示无限次运行*/
        animation: changeBack 5s infinite; 
    }
</style>