前端css中animation(动画)的使用

前端css中animation的使用

一、前言
二、主要内容说明
三、结语
四、定位日期

一、前言

animation常伴随着动画帧@keyframes一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。

二、主要内容说明

animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如"animation:"+后面各属性的值，用空格隔开+"；"的形式设置动画效果。举例如：animation: box1 3s linear 2s infinite;，表示创建一个叫box1，持续时间3s，开始到结束的动画速度不变，延迟2s后再开始，不断重复的动画。各值要按排序要求设置好。

（一）、animation-name（名称）属性

animation-name用于定义动画的名称。当我们创建一个动画时，给他编辑一个名称方便管理些。如某个动画取名为n，要关键帧@keyframes配合运行这个n动画，则关键帧里需要指定索引这个名称n，最后关键帧就可以确定是要进行这个n动画了。当然不给@keyframes关键帧指定对象运行动画，他也不懂要运行啥。

（二）、animation-duration（持续时间）属性

duration为持续时间。那么animation-duration则为定义动画的持续时间的属性，通常以秒(s)或毫秒(ms)为单位。

1.前两个属性举例，源码1

我们先创建个盒子，盒子名叫box-max，宽高各100px，天蓝色背景。使用动画效果使得盒子逐渐变透明，这个动画效果叫box1，动画持续持续3s。代码如下：

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 定义.box-max类的样式，设置盒子的尺寸和背景颜色 */
        .box-max {
            width: 100px;             /* 盒子宽度 */
            height: 100px;            /* 盒子高度 */
            background-color: aqua;   /* 盒子背景颜色为水蓝色 */
            animation-name: box1;     /* 应用动画名称为box1 */
            animation-duration: 3s;   /* 动画持续时间为3秒 */
        }

        /* 定义名为box1的关键帧动画 */
        @keyframes box1 {
            0% {
                opacity: 1;           /* 动画开始时，盒子完全不透明 */
            }
            100% {
                opacity: 0.3;         /* 动画结束时，盒子透明度为0.3 */
            }
        }

    </style>
</head>
<body>
    <!-- 动画作用的元素，带有描述性文本 -->
    <div class="box-max">
        我是一个盒子，名称为box1，我会逐渐变透明。
    </div>
</body>
</html>

2.源码1运行效果

（1）、视频效果

动画名称+动画运行时间，源码1

（2）、截图效果

开始时
逐渐透明化

（三）、animation-timing-function属性

timing（时序），function（函数）。animation-timing-function用于控制动画的速度曲线。动画有运行的时段，有些时段我们想让它快些，有些时段我们想让它慢性，此时可以根据需要自己设置好animation-timing-function的值便可，常用的值有

linear ------ 从头到尾，动画的运行速度相同。
ease ------ 默认值，开始低速，然后加快，结束前变慢。
ease-in ------ 低速开始，结束前不断变快。
ease-out ------ 快速开始，结束前不断变慢。
ease-in-out ------ 开始和结束时段是慢速，中间部分速度最快。
cubic-bezier(n,n,n,n) ------ 贝塞尔曲线，可以自己设置速度曲线。

1.使用贝塞尔曲线举例，源码2

源码1的基础上，使用animation-timing-function属性的cubic-bezeier自己设置值。开始动画速度较快，后面结束段部分动画速度慢。运行效果和源码1类似。源码1为默认情况下的ease值（前面慢，后面加快，结束前变慢），源码2设置的是动画速度前部分快和源码1运行效果略微不同。

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 定义.box-max类的样式，设置盒子的尺寸、背景颜色和动画效果 */
        .box-max {
            width: 100px;             /* 盒子宽度 */
            height: 100px;            /* 盒子高度 */
            background-color: aqua;   /* 盒子背景颜色为水蓝色 */
            animation-name: box2;     /* 应用动画名称为box2 */
            animation-duration: 4s;   /* 动画持续时间为4秒 */
            animation-timing-function: cubic-bezier(1, 1, 0.8, 0.2); /* 自定义的三次贝塞尔曲线，用于控制动画速度 */
        }

        /* 定义名为box1的关键帧动画，控制透明度从不透明到半透明的过渡 */
        @keyframes box2 {
            0% {
                opacity: 1;           /* 动画开始时，盒子完全不透明 */
            }
            100% {
                opacity: 0.1;         /* 动画结束时，盒子透明度为0.1 */
            }
        }
    </style>
</head>
<body>
    <!-- 动画作用的元素，提供简单的文本描述 -->
    <div class="box-max">
        我是一个盒子，名称为box2，我会逐渐变透明。
    </div>
</body>
</html>

2.源码2运行效果

（1）、视频效果

动画的速度曲线，源码2

（2）、截图效果

动画开始阶段
动画快结束阶段

（四）、animation-delay（延迟）属性

delay（延迟）。顾名思义，animation-delay为延迟的时间，动画开始前的延迟时间。因为有时候我们不需要动画马上运行，需要延迟一定的时间后再开始。单位同样取秒(s)或毫秒(ms)。

后面的源码3小盒子在等待期间，它是显示的，不是透明的状态效果，需要等待2s后才开始进行动画由透明变为不透明，这里是属性animation-fill-mode的默认值none设置的作用。后面也会讲到这部分关于动画前、后的内容。

1.动画延迟举例，源码3

我们先创建两个盒子，一个大盒子，一个小盒子。大盒子程序一运行便进行动画效果，小盒子程序刚开始运行先等2s再进行动画效果。

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 定义.box-max类的样式，设置较大盒子的尺寸、背景颜色和动画效果 */
        .box-max {
            width: 200px;             /* 盒子宽度 */
            height: 200px;            /* 盒子高度 */
            background-color: aqua;   /* 盒子背景颜色为水蓝色 */
            animation-name: box3-1;   /* 应用动画名称为box3-1 */
            animation-duration: 4s;   /* 动画持续时间为4秒 */
            animation-timing-function: linear; /* 动画速度函数为线性，即动画速度恒定 */
        }
        /* 定义.box-min类的样式，设置较小盒子的尺寸、背景颜色和动画效果 */
        .box-min {
            width: 150px;             /* 盒子宽度 */
            height: 150px;            /* 盒子高度 */
            background-color: yellowgreen;   /* 盒子背景颜色为黄绿色 */
            animation-name: box3-2;   /* 应用动画名称为box3-2 */
            animation-duration: 4s;   /* 动画持续时间为4秒 */
            animation-timing-function: linear; /* 动画速度函数为线性 */
            animation-delay: 2s;      /* 动画延迟2秒开始 */
        }

        /* 定义名为box3-1的关键帧动画，控制透明度从全透明到不透明的过渡 */
        @keyframes box3-1 {
            0% {
                opacity: 0;           /* 动画开始时，盒子完全透明 */
            }
            100% {
                opacity: 1;           /* 动画结束时，盒子完全不透明 */
            }
        }
        /* 定义名为box3-2的关键帧动画，控制透明度从全透明到不透明的过渡 */
        @keyframes box3-2 {
            0% {
                opacity: 0;           /* 动画开始时，盒子完全透明 */
            }
            100% {
                opacity: 1;           /* 动画结束时，盒子完全不透明 */
            }
        }
    </style>
</head>
<body>
    <!-- 动画作用的较大元素，提供简单的文本描述 -->
    <div class="box-max">
        我是一个盒子，名称为box3-1，我会逐渐变不透明。
    </div>
    <!-- 动画作用的较小元素，提供简单的文本描述 -->
    <div class="box-min">
        我也是一个盒子，名称为box3-2，我也会逐渐变不透明。
    </div>
</body>
</html>

2.源码3运行效果

（1）、视频效果

动画延迟属性，源码3

（2）、截图效果

大盒子先逐渐不透明化的动画，小盒子等2s后才进行不透明化的动画。

程序运行前部分效果，截图如下
程序运行后部分效果，截图如下

（五）、animation-iteration-count（反复计数）属性

iteration（反复），count（计数）。animation-iteration-count用于定义动画播放的次数。一段动画我们设置的时间若有限，想让动画多运行几次可以用此属性设置。取值的方式主要有以下几种。

整数 ------ 设置整数值，如1、2、3，当为3时表示动画重复运行3次。
小数 ------ 设置小数，如2.5，那么表示动画重复2次，第三次进行一半。
infinite ------ 取值infinite(无限的)则重复运行动画

1.重复动画，源码4

我们创建一个盒子，背景添加图片，盒子变圆，然后产生一个左边滚到右边的动画，动画一直重复运行。

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 设置动画效果的基本样式 */
        .box-max {
            width: 100px;                  /* 盒子宽度设置为100像素 */
            height: 100px;                 /* 盒子高度设置为100像素 */
            background-image: url('./小蜗牛.jpg'); /* 设置背景图片，确保路径正确 */
            background-size: cover;        /* 背景图片覆盖整个元素区域 */
            border-radius: 50%;            /* 设置圆形边框，使盒子呈圆形 */
            position: relative;            /* 设置相对定位，以便使用left属性和transform */
            animation-name: box4;          /* 引用定义的关键帧动画名称 */
            animation-duration: 4s;        /* 动画持续时间为4秒 */
            animation-timing-function: linear; /* 动画的时间函数设置为线性，速度恒定 */
            animation-iteration-count: infinite; /* 动画无限重复播放 */
        }

        /* 定义动画关键帧 */
        @keyframes box4 {
            from {
                left: 0; /* 动画开始时，元素从容器的最左端开始 */
                transform: rotate(0deg); /* 开始旋转时角度为0度 */
            }
            to {
                left: calc(100% - 100px); /* 动画结束时，元素移动到容器宽度减去元素宽度的位置 */
                transform: rotate(360deg); /* 结束旋转时完成360度旋转 */
            }
        }
    </style>
</head>
<body>
    <div class="box-max"></div> <!-- 动画作用的元素，显示为一个旋转并左右移动的圆形 -->
</body>
</html>

2.源码4运行效果

（1）、视频效果

动画持续进行，源码4

（2）、截图效果

动画开始前部分
动画开始后部分

（六）、animation-direction（方向）属性

direction(方向)，属性animation-direction用于设置动画的播放方式，是从头到尾正向播放，或是从尾到头的倒放。当我们设置关键帧，开始为0%，结束为100%的状态，正向为0%到100%的动画变换，反向倒放为100%到0%的动画变换。属性值主要有下面4个。

normal ------ 动画正放，动画一周期解释后重置到开始位置。
reverse ------- 动画倒放
alternate ------ 动画在奇数次正向播放，偶数次反向播放。如过一个动画是持续播放的，程序刚开始动画为第一次，这一次播放完毕便进行第二次，以此类推。当是奇数，如1,3,5···时，动画就正向播放；当是偶数，如2,4,6···时，动画就反向播放。
alternate-reverse ------ 与alternate属性相反，动画在奇数次反向播放，偶数次正向播放。

1.方向动画效果，源码5

我们在源码4的基础上添加alternate的播放方式，原本源码4的动画中图片是不断由左滚向右边，我们使用alternate的方式，便可让图片来回滚动了。

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 设置动画效果的基本样式 */
        .box-max {
            width: 100px;                  /* 盒子宽度设置为100像素 */
            height: 100px;                 /* 盒子高度设置为100像素 */
            background-image: url('./小蜗牛.jpg'); /* 设置背景图片，确保路径正确 */
            background-size: cover;        /* 背景图片覆盖整个元素区域 */
            border-radius: 50%;            /* 设置圆形边框，使盒子呈圆形 */
            position: relative;            /* 设置相对定位，以便使用left属性和transform */
            animation-name: box4;          /* 引用定义的关键帧动画名称 */
            animation-duration: 4s;        /* 动画持续时间为4秒 */
            animation-timing-function: linear; /* 动画的时间函数设置为线性，速度恒定 */
            animation-iteration-count: infinite; /* 动画无限重复播放 */
            animation-direction: alternate; /* 动画在完成一次循环后反向播放 */
        }

        /* 定义动画关键帧 */
        @keyframes box4 {
            from {
                left: 0; /* 动画开始时，元素从容器的最左端开始 */
                transform: rotate(0deg); /* 开始旋转时角度为0度 */
            }
            to {
                left: calc(100% - 100px); /* 动画结束时，元素移动到容器宽度减去元素宽度的位置 */
                transform: rotate(360deg); /* 结束旋转时完成360度旋转 */
            }
        }
    </style>
</head>
<body>
    <div class="box-max"></div> <!-- 动画作用的元素，显示为一个旋转并左右移动的圆形 -->
</body>
</html>

2.源码5运行效果

（1）、视频效果

动画来回滚动，源码5

（2）、截图效果

开始前部分，奇数次
后部分，奇数次
开始前部分，偶数次
后部分，偶数次

（七）、animation-fill-mode属性

animation-fill-mode主要用于定义动画前后的元素状态。主要属性值如下

none ------ 默认值，动画不会对元素在动画开始前或结束后形式参数产生任何影响。动画开始前，元素显示css非动画状态的形式；动画结束元素回到动画未运行前的初始状态。
forwards ------ 动画完成后，元素保持在动画的最后关键帧。就是动画运行到哪里，结束后它就保持在哪里，不会回初始点了。
backwards ------ 动画开始前，元素显示动画的第一个关键帧的样式。当我们设置一个盒子，进行的动画是刚开始开始是透明的，后面慢慢变得完全不透明。默认情况下，在等待运行前，盒子长啥样它就显示啥样，动画开始后才运行从透明变为不透明的状态，如源码3中的小盒子的属性，小盒子是延迟2s钟才开始运行动画，在这2s中的等待期盒子是显示盒子本身的具体样子，并不是以透明的状态进行等待。若要达到在动画运行前的等待期间为透明效果，就可以运用backwards的属性，在动画开始前的等待期，它显示的是第一关键帧的时候的样子，也就是透明的样子。
both ------ 结合了forwards和backwards的效果。动画开始前的等待期他是第一关键帧的样子，动画结束后保持在最后结束时的模样，也不会回到原点了。

1.动画结束后停在最后关键帧，源码6-1

在源码5上修改，使图片从左往右只滚动一次，默认情况下，图片滚动完后又恢复到初始左边位置。然后设置forwards属性，如
animation-fill-mode: forwards; /* 动画结束时元素保持最终状态 */

此时图片滚动完后图片就直接停在动画最后关键帧的位置，不会回原本位置了。

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 设置动画效果的基本样式 */
        .box-max {
            width: 100px;                  /* 盒子宽度设置为100像素 */
            height: 100px;                 /* 盒子高度设置为100像素 */
            background-image: url('./小蜗牛.jpg'); /* 设置背景图片，确保路径正确 */
            background-size: cover;        /* 背景图片完全覆盖元素区域，无空隙 */
            border-radius: 50%;            /* 设置盒子为圆形 */
            position: relative;            /* 使用相对定位，支持left属性和transform变换 */
            animation-name: box4;          /* 使用名为box4的关键帧动画 */
            animation-duration: 4s;        /* 动画总持续时间为4秒 */
            animation-timing-function: linear; /* 动画时间函数为linear，即动画速度恒定 */
            animation-iteration-count: 1;  /* 动画播放一次 */
            animation-fill-mode: forwards; /* 动画结束时元素保持最终状态 */
        }

        /* 定义动画关键帧 */
        @keyframes box4 {
            from {
                left: 0; /* 动画开始时元素位于容器的最左端 */
                transform: rotate(0deg); /* 动画开始时旋转角度为0度 */
            }
            to {
                left: calc(100% - 100px); /* 动画结束时元素位于容器宽度减去元素宽度的位置 */
                transform: rotate(360deg); /* 动画结束时元素完成一圈（360度）旋转 */
            }
        }
    </style>
</head>
<body>
    <div class="box-max"></div> <!-- 动画作用的元素，显示为一个旋转并左右移动的圆形 -->
</body>
</html>

2.源码6-1运行效果

（1）、视频效果

动画结束后停在后面一帧，源码6-1

（2）、截图效果

动画开始的前段状态
动画结束状态
注释掉animation-fill-mode: forwards; /* 动画结束时元素保持最终状态 */，也就是默认其况下的运行完后的状态。

3.动画开始前元素第一关键帧状态，源码6-2

在源码3的小盒子部分上添加
animation-fill-mode: backwards;动画开始前应用第一帧的状态，结束后回到初始状态

小盒子等2s后才开始动画，在这2s的等待期，小盒子显示为第一关键帧的状态，一开始关键帧为透明。源码3的效果，小盒子在2s这期间都是整个显示，并没有透明效果。使用backwards属性，那么盒子在动画前的等待期也就是这2s内显示的是第一关键帧的状态，也就是透明的状态。

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 设置动画效果的基本样式 */
        /* 定义.box-max类，为较大盒子设置样式和动画 */
        .box-max {
            width: 200px;                      /* 盒子宽度设置为200像素 */
            height: 200px;                     /* 盒子高度设置为200像素 */
            background-color: aqua;            /* 盒子背景颜色设置为水蓝色 */
            animation-name: box3-1;            /* 应用名为box3-1的动画 */
            animation-duration: 4s;            /* 动画持续时间设置为4秒 */
            animation-timing-function: linear; /* 动画速度函数设置为线性，速度恒定 */
            animation-fill-mode: forwards;     /* 动画结束后保持最后一帧的状态 */
        }

        /* 定义.box-min类，为较小盒子设置样式和动画 */
        .box-min {
            width: 150px;                      /* 盒子宽度设置为150像素 */
            height: 150px;                     /* 盒子高度设置为150像素 */
            background-color: yellowgreen;     /* 盒子背景颜色设置为黄绿色 */
            animation-name: box3-2;            /* 应用名为box3-2的动画 */
            animation-duration: 4s;            /* 动画持续时间设置为4秒 */
            animation-timing-function: linear; /* 动画速度函数设置为线性 */
            animation-delay: 2s;               /* 动画延迟2秒开始 */
            animation-fill-mode: backwards;    /* 动画开始前应用第一帧的状态，结束后回到初始状态 */
        }

        /* 动画box3-1关键帧定义 */
        @keyframes box3-1 {
            0% { opacity: 0; } /* 动画开始时盒子完全透明 */
            100% { opacity: 1; } /* 动画结束时盒子完全不透明 */
        }

        /* 动画box3-2关键帧定义 */
        @keyframes box3-2 {
            0% { opacity: 0; } /* 动画开始时盒子完全透明 */
            100% { opacity: 1; } /* 动画结束时盒子完全不透明 */
        }
    </style>
</head>
<body>
    <div class="box-max">
        我是一个盒子，名称为box3-1，我会逐渐变不透明。
    </div>
    <div class="box-min">
        我也是一个盒子，名称为box3-2，我也会逐渐变不透明。
    </div>
</body>
</html>

4.源码6-2运行效果

（1）、视频效果

动画前等待期小盒子第一帧透明状态，源码6-2

（2）、截图效果

前段截图
中段截图
后段截图

（八）、animation-play-state（播放状态）属性

state（状态）。animation-play-state用于控制动画的播放状态。在动画过程中我们可以暂停动画，也可以暂停后继续运行。值主要有两个。即running 和paused。当running时，动画正常播放。当paused时，动画则停在当前帧。

1.动画暂停或继续，源码7

我们在源码5的基础上添加鼠标悬停:hover效果，当鼠标碰到图片时使得animation-play-state变为paused暂停动画，当鼠标移开时动画又继续。

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 设置动画效果的基本样式 */
        .box-max {
            width: 100px;                  /* 盒子宽度设置为100像素 */
            height: 100px;                 /* 盒子高度设置为100像素 */
            background-image: url('./小蜗牛.jpg'); /* 设置背景图片，确保文件路径和文件名正确 */
            background-size: cover;        /* 背景图片完全覆盖元素，不留空白 */
            border-radius: 50%;            /* 设置边框为圆形 */
            position: relative;            /* 设置为相对定位以使用left和transform属性 */
            animation-name: box4;          /* 引用定义的关键帧动画名称 */
            animation-duration: 4s;        /* 动画持续时间为4秒 */
            animation-timing-function: linear; /* 设置动画速度函数为线性 */
            animation-iteration-count: infinite; /* 动画无限重复播放 */
            animation-direction: alternate; /* 动画每次完成后反向播放 */
            animation-play-state: running; /* 默认动画状态为运行 */
        }

        .box-max:hover {
            animation-play-state: paused; /* 鼠标悬停时暂停动画 */
        }

        /* 定义动画关键帧 */
        @keyframes box4 {
            from {
                left: 0; /* 动画开始时，元素从容器的最左端开始 */
                transform: rotate(0deg); /* 开始时无旋转 */
            }
            to {
                left: calc(100% - 100px); /* 动画结束时，元素移动到右侧，留下元素宽度的空间 */
                transform: rotate(360deg); /* 结束时元素完成一圈（360度）旋转 */
            }
        }
    </style>
</head>
<body>
    <div class="box-max"></div> <!-- 动画作用的元素，显示为一个旋转并左右移动的圆形 -->
</body>
</html>

2.源码7运行效果

（1）、视频效果

鼠标悬停动画暂停,源码7

（2）、截图效果

当鼠标未悬停到圆图片上时，它不断来回滚动
当鼠标悬停到图片上时图片停止来回滚动（截图时鼠标消失了，图片中鼠标未显示）。

三、结语

动画效果还是很有意思的，增强了网页窗口的交互性。动画效果的简单使用和transition(过渡)的使用方法比较相似。都有设置持续时间和时间段的速度及是否延迟的效果。关于动画播放状态的效果，即开始还是暂停也可以结合js来呈现，后面便慢慢添加相关的知识内容吧。

由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

四、定位日期

2024.5.6；

18:53；