一篇文章带您学会CSS的动画

动画和过渡的区别

过渡：实现两个状态间的变化过程。

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

动画的实现步骤

1.定义动画

书写格式

css">@keyframes 动画名称{from{}to{}
}

2.使用格式

书写格式

css">animation:动画名称 动画花费的时间;

完整的书写格式

css">animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

说明：动画名称和动画时长必须赋值，取值不分先后顺序，第一个时间表示动画时长，第二个时间表示延迟时间。

动画属性说明：

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards:最后一帧状态。backwards：第一帧状态
animation-timing-function	速度曲线	steps（数字）：逐帧动画
animation-iteration-count	重复次数	infinite 为无限循环
animation-direction	动画执行方向	alternate为反复
animation-play-state	暂停动画	paused为暂停，通常配合:hover一起使用

动画体验

<!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 ani {form{background-color: red;}to{background-color: blue;}}/* 使用动画 */div {width: 200px;height: 200px;border: 1px solid #000;margin: 100px auto;/*它变化颜色不是一下就过了，而是有一个过渡，我们称之为补帧动画*/animation: ani 10s;}</style>
</head>
<body><div></div>
</body>
</html>

<!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 ani {0% {background-color: red;transform: scale(1.1);}1% {background-color: rgb(65, 46, 46);transform: scale(1.5);}9% {background-color: rgb(169, 227, 36);transform: scale(2);}20% {background-color: rgb(10, 223, 155);transform: scale(2.2);}30% {background-color: rgb(10, 223, 155);transform: scale(2.2);}50% {background-color: aquamarine;transform: scale(0.5);}80% {background-color: rgb(85, 18, 218);transform: scale(0.1);}90% {background-color: rgb(255, 2, 204);transform: scale(0.9);}100% {background-color: rgb(253, 0, 0);transform: scale(1);}}div {width: 200px;height: 200px;border: 1px solid #000;margin: 100px auto;animation: ani 20s;}</style>
</head><body><div></div>
</body></html>

3.animation-delay 延迟

在动画里面，让一下元素慢一点执行动画。

<!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>.box {display: flex;justify-content: space-evenly;align-items: end;width: 1200px;height: 600px;margin: 0 auto;border: 1px solid #000;}.box .son {width: 50px;height: 50px;border-radius: 50px;background-color: aqua;animation-name: mover;animation-duration: 30s;}.box:nth-child(1) {animation-delay: 10s;}.box:nth-child(2) {animation-delay: 10s;}.box:nth-child(3) {animation-delay: 20s;}@keyframes mover {0% {background-color: antiquewhite;transform: translateY(-200px);}10% {background-color: rgb(255, 145, 1);transform: translateY(-150px);}20% {background-color: rgb(156, 253, 0);transform: translateY(-100px);}30% {background-color: rgb(0, 255, 85);transform: translateY(-50px);}40% {background-color: rgb(0, 217, 255);transform: translateY(0px);}50% {background-color: rgb(0, 0, 255);transform: translateY(-150px);}60% {background-color: rgb(166, 0, 255);transform: translateY(-200px);}70% {background-color: rgb(255, 0, 195);transform: translateY(-250px);}80% {background-color: rgb(255, 0, 64);transform: translateY(-180px);}90% {background-color: rgb(17, 52, 24);transform: translateY(-100px);}100% {background-color: rgb(7, 255, 57);transform: translateY(0px);}}</style>
</head><body><div class="box"><div class="son"></div><div class="son"></div><div class="son"></div></div>
</body></html>

4.animation-fill-mode 动画执行完毕时状态

属性值：

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>@keyframes move {0% {transform: translateX(400px);background-color: aqua;}10% {transform: translateX(410px);background-color: aquamarine;}20% {transform: translateX(450px);background-color: rgb(0, 94, 255);}50% {transform: translateX(400px);background-color: rgb(255, 89, 0);}70% {transform: translateX(200px);background-color: rgb(179, 255, 0);}90% {transform: translateX(50px);background-color: rgb(0, 255, 64);}100% {transform: translateX(0px);background-color: rgb(255, 0, 111);}}.box {width: 200px;height: 200px;background-color: pink;animation-name: move;animation-duration: 10s;/* forwards:动画结束后，状态停止在最后一帧。backwards：动画结束后，状态固定在第一帧。*/animation-fill-mode: backwards;}</style>
</head><body><div class="box"></div>
</body></html>

5.animation-timing-function 速度曲线

steps（数字）：逐帧动画

默认的速度曲线：慢快满

linear：匀速

<!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: translateX(0);}100% {transform: translateX(1000px);}}.box {width: 200px;height: 200px;background-color: blue;animation-name: move;animation-duration: 6s;}.box:nth-child(2) {/*linear:匀速*/animation-timing-function: linear;}</style>
</head>
<body><div class="box"></div><div class="box"></div>
</body>
</html>

<!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: translateX(0);}100% {transform: translateX(1000px);}}.box {width: 200px;height: 200px;background-color: blue;animation-name: move;animation-duration: 6s;}.box:nth-child(2) {animation-timing-function: linear;}.box:nth-child(3) {animation-timing-function: steps(8);}</style>
</head>
<body><div class="box"></div><div class="box"></div><div class="box"></div>
</body>
</html>

6.animation-iteration-count 重复次数

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: translateX(0);}100% {transform: translateX(1000px);}}.box {width: 200px;height: 200px;background-color: blue;animation-name: move;animation-duration: 6s;/* 重复播放 */animation-iteration-count: infinite;}.box:nth-child(2) {animation-timing-function: linear;}.box:nth-child(3) {animation-timing-function: steps(8);}</style>
</head><body><div class="box"></div><div class="box"></div><div class="box"></div>
</body></html>

7.animation-direction 动画执行方向

alternate：反复

reverse:反向

<!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: translateX(0);}100% {transform: translateX(1000px);}}.box {width: 200px;height: 200px;background-color: blue;animation-name: move;animation-duration: 6s;/* 重复播放 */animation-iteration-count: infinite;/* 下一次播放就会反着来 */animation-direction: alternate;}.box:nth-child(2) {animation-timing-function: linear;}.box:nth-child(3) {animation-timing-function: steps(8);}</style>
</head><body><div class="box"></div><div class="box"></div><div class="box"></div>
</body></html>

8.animation-play-state 暂停动画

paused为暂停，通常配合:hover一起使用。

<!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>.box {width: 300px;height: 300px;background-color: red;animation-name: move;animation-duration:2s ;animation-iteration-count: infinite;animation-direction: alternate;}.box:hover {/* 鼠标经过的时候暂停 */animation-play-state: paused;}@keyframes move {0% {transform: translateY(0);}100% {transform: translateY(300px);}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

注意：本文章是笔者的学习笔记，因为笔者的能力有限，会出现很多没有想过的问题，所以，如果您在浏览或者运行代码的时候出现问题，请在评论区留言，笔者看到后会在第一时间处理，谢谢。