目录
一、使用方式
1、keyframes
2、关键帧
二、常用属性
1、基本属性
2、新增属性
三、代码
1、动画效果
2、关键帧
一、使用方式
1、keyframes
（1）通过在style标签中创建keyframes的方式创建动画效果，keyframes后跟自定义名字，如下代码
@keyframes test {from {margin-left: 0;background-color: orange;}to {margin-left: 700px;background-color: red;}}
2、关键帧
（1）动画开始，用from，里面包含动画的初始状态
（2）动画结束，用to，里面包含动画的结束状态
（3）可以通过百分比的方式添加动画的中间状态，比如33%等
二、常用属性
1、基本属性
与过渡效果相同，只需要替换名称，参考本文
/comegoing_xin_lv/article/details/126651255?spm=1001..3001.5501
2、新增属性
（1）重复次数（animation-iteration-count）
--可设置数值
--也可设置为无限次，infinite
（2）运动方向（animation-direction）
--normal 是正常运动
--reverse 反向运动
--alternate 运动完后，动画返回
--alternate-reverse 反向运动完后，动画返回
（3）动画执行状态（animation-play-state）
--running正在执行
--paused暂停
（4）动画填充模式（animation-fill-mode）
--none 默认值，动画执行完毕后回到初始位置
--forwards 动画执行完毕后停止在结束位置
--backwards 动画执行时，在延迟状态时就会转变为开始状态，而仅仅延迟时，只有运行开始时，才会变为开始状态
三、代码
1、动画效果
<!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>动画效果</title><style>@keyframes test {from {margin-left: 0;background-color: orange;}to {margin-left: 700px;background-color: red;}}.box1 {width: 800px;height: 800px;background-color: silver;}.box2 {background-color: #bfa;width: 100px;height: 100px;animation-name: test;animation-duration: 2s;/* 重复次数，可设置数值，也可设置为无限次 */animation-iteration-count: infinite;/* 运动方向normal 是正常运动reverse 反向运动alternate 运动完后，动画返回alternate-reverse 反向运动完后，动画返回*/animation-direction: alternate-reverse;/* 动画执行状态running正在执行paused暂停*/animation-play-state: running;/* 动画填充模式none 默认值，动画执行完毕后回到初始位置forwards 动画执行完毕后停止在结束位置backwards 动画执行时，在延迟状态时就会转变为开始状态，而仅仅延迟时，只有运行开始时，才会变为开始状态*/animation-fill-mode: none;}.box3 {background-color: #bfa;margin-top: 200px;width: 100px;height: 100px;animation-name: test;animation-duration: 2s;}.box1:hover .box2 {animation-play-state: paused;}</style></head><body><div class="box1"><div class="box2"></div><div class="box3"></div></div></body></html>
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>关键帧</title><style>@keyframes ball {from {margin-top: 0px;}33% {margin-top: 400px;}66% {margin-top: 300px;}to {margin-top: 400px;}}.box {background-color: silver;width: 500px;height: 500px;border-bottom: solid 10px black;overflow: hidden;}.box div {border-radius: 50%;width: 100px;height: 100px;float: left;animation-name: ball;animation-duration: 1s;animation-iteration-count: infinite;animation-fill-mode: backwards;animation-direction: alternate;animation-timing-function: ease-in-out;}.box1 {background-color: red;animation-delay: 0.1s;}.box2 {background-color: blue;animation-delay: 0.2s;}.box3 {animation-delay: 0.3s;background-color: orange;}.box4 {animation-delay: 0.4s;background-color: yellow;}.box5 {animation-delay: 0.5s;background-color: green;}</style></head><body><div class="box"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div></div></body></html>
如果觉得《css动画效果（关键帧）》对你有帮助，请点赞、收藏，并留下你的观点哦！
![[css] 什么是关键帧动画？](https://sm.tqys.net/uploadfile/pic/558.jpg)
