动画的使用_动画csdn-CSDN博客

本文链接：https://blog.csdn.net/Narsissi/article/details/127873638

前言：

动画：

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面。

动画与过渡的区别：

过渡：实现2个不同状态间的变化过程。

动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）。

1、简单动画

定义动画：

样式1：

@keyframes move {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(300px, 0);
    }
}

样式2：

@keyframes move {

    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(300px, 0);
    }
}

调用动画：

animation: 动画名称执行时间循环；

div {
    animation: move 1s infinite;
}

准备工作完成后，开始案例实践啦~

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes move {

            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(300px, 0);
            }
        }

        div {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            animation: move 1s infinite;
        }

        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/102774700_p0_master1200.jpg" alt="">
    </div>
</body>

</html>

代码执行效果：使盒子向右水平移动300px（动画时长1s+无限循环）。

动画效果：

2、复杂动画（多个状态+多重样式）

动画多重状态：

        @keyframes move {

            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(300px, 0);
            }

            50% {
                transform: translate(300px, 300px);
            }

            75% {
                transform: translate(0px, 300px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

动画完整样式：

animation:动画名称执行时长速度曲线(取值为linear匀速) 延迟时间重复次数(infinite为无限循环) 动画方向(alternate为来回执行) ；

animation: move 5s linear 0s infinite alternate;

注意：

取值不分先后顺序。

动画名称和动画时长必须赋值。

如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间。

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            animation: move 5s linear 0s infinite alternate;
        }

        img {
            width: 100%;
            height: 100%;
        }

        @keyframes move {

            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(300px, 0);
            }

            50% {
                transform: translate(300px, 300px);
            }

            75% {
                transform: translate(0px, 300px);
            }

            100% {
                transform: translate(0, 0);
            }
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/102774700_p0_master1200.jpg" alt="">
    </div>
</body>

</html>

动画时长过长导致GIF内存过大无法展示，这里缩小比例（见谅啦）

代码效果：向右移动300px-向下移动300px-向左移动300px-向上移动300px-回到原点（动画时长5s+匀速移动+延迟0s+无限循环+来回移动）。

动画效果：

3、逐帧动画

准备显示区域：设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图。

        div {
            width: 140px;
            height: 140px;
            background: url(./images/bg.png) no-repeat;
        }

定义动画：改变背景图的位置（移动的距离就是精灵图的宽度）。

        @keyframes run {

            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1680px 0;
            }

        }

使用动画：添加速度曲线steps(N)，N与精灵图上小图个数相同（添加无限重复效果）。

animation: run 1s steps(12) infinite;

添加盒子移动动画：

        @keyframes move {

            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(800px, 0);
            }

        }

完整调用动画：

animation: run 1s steps(12) infinite, move 2s linear forwards;

forwards：使动画执行完毕停在最后一帧动画的时候。

backwards ：使动画执行完毕回到开始第一帧动画的时候。

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 140px;
            height: 140px;
            background: url(./images/bg.png) no-repeat;
            animation: run 1s steps(12) infinite, move 2s linear forwards;
        }

        @keyframes run {

            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1680px 0;
            }

        }

        @keyframes move {

            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(800px, 0);
            }

        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

代码效果：

1、背景图片向左移动1680px-使人物产生跑动效果（动画时长1s+帧数12+无限循环）。

2、盒子向右移动800px-使人物产生向前移动效果（动画时长2s+匀速移动+动画执行完毕停在最后一帧）。

最终效果：

扩展：暂停动画-鼠标移入盒子是盒子所有动画暂停：

        div:hover {
            animation-play-state: paused;
        }

动画效果：

背景图片：

动画的使用

前言：

动画：

动画与过渡的区别：

目录：

1-简单动画

2-复杂动画

3-逐帧动画

1、简单动画

定义动画：

调用动画：

准备工作完成后，开始案例实践啦~

完整代码：

动画效果：

2、复杂动画（多个状态+多重样式）

动画多重状态：

动画完整样式：

注意：

动画效果：

3、逐帧动画

动画的使用

前言：

动画：

动画与过渡的区别：

目录：

1-简单动画

2-复杂动画

3-逐帧动画

1、简单动画

定义动画：

调用动画：

准备工作完成后，开始案例实践啦~

完整代码：

动画效果 ：

2、复杂动画 （多个状态+多重样式）

动画多重状态：

动画完整样式：

注意：

动画效果：

3、逐帧动画

“相关推荐”对你有帮助么？

动画效果：

2、复杂动画（多个状态+多重样式）