前端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；