新手福利 -- 还在为CSS动画发愁？一篇搞定@keyframes所有知识点！
一、什么是@keyframes？
简单说：@keyframes 是CSS3的 动画关键帧规则，就像导演给动画片分镜头一样，你可以定义动画在不同时间点的样式变化。
举个栗子🌰：
想让一个方块从左到右移动，你需要告诉浏览器：
- 开始时（0%）在左边
- 结束时（100%）在右边
这就是@keyframes的核心作用！
二、最简语法结构（5秒上手）
@keyframes 动画名称 {0% { /* 初始状态样式 */ }50% { /* 中间状态样式 */ }100% { /* 结束状态样式 */ }
}
参数解释表：
| 组成部分 | 说明 | 必填 |
|---|---|---|
@keyframes | 声明动画的关键字 | ✅ |
动画名称 | 自定义的动画名字（如：move） | ✅ |
0% / from | 动画开始时的样式 | ✅ |
100% / to | 动画结束时的样式 | ✅ |
| 中间百分比（如50%） | 动画执行到一半时的样式 | ❌ |
三、手把手创建第一个动画（代码+效果）
目标：让一个方块水平向右移动200px
HTML：
<div class="box"></div>
CSS：
.box {width: 50px;height: 50px;background: red;/* 应用动画：名称 时长 速度曲线 重复次数 */animation: move 2s ease infinite;
}/* 关键帧动画 */
@keyframes move {0% {transform: translateX(0);}100% {transform: translateX(200px);}
}
效果：红色方块会无限循环向右滑动 ➡️
transform知识点可看 CSS3 transform 属性详解
四、核心属性详解（附代码片段）
1. 动画时间轴控制
css
animation: 动画名称 | 时长 | 速度曲线 | 延迟 | 次数 | 方向;
常用属性表：
| 属性 | 可选值 | 默认值 |
|---|---|---|
animation-name | 自定义的动画名称 | none |
animation-duration | 时长（如：2s / 500ms） | 0s |
animation-timing-function | ease / linear / ease-in-out等 | ease |
animation-delay | 延迟开始时间（如：1s） | 0s |
animation-iteration-count | 数字 / infinite | 1 |
animation-direction | normal / reverse / alternate | normal |
示例：让方块先快后慢，延迟1秒执行，来回运动3次(在三中示例代码中改变即可看到效果)
animation: move 2s ease-in-out 1s 3 alternate;
五、进阶技巧（新手必看！）
1. 多状态动画（上面为单个示例代码，下面为完整代码）
@keyframes color-change {0% { background: red; }50% { background: yellow; transform: scale(1.2); }100% { background: green; }
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 50px;height: 50px;/* 应用动画：名称 时长 速度曲线 重复次数 */animation: move 2s ease infinite;}/* 关键帧动画 */@keyframes move {0% { background: red; }50% { background: yellow; transform: scale(1.2); }100% { background: green; }}</style>
</head>
<body><div class="box"></div>
</body>
</html>效果：红 → 黄（放大） → 绿(可复制代码到VScode里观察，不便显示视频)
2. 组合动画
@keyframes combo {0% { transform: translateX(0) rotate(0); }50% { transform: translateX(200px) rotate(180deg); }100% { transform: translateX(0) rotate(360deg); }
}
效果：移动 + 旋转组合动画
六、常见问题解答（新手避坑指南）
问题1：为什么我的动画不生效？
检查步骤：
- 是否定义了
@keyframes名称 - 元素是否应用了
animation属性 - 是否存在拼写错误
问题2：如何让动画停留在最后一帧？
设置：animation-fill-mode: forwards;
问题3：如何暂停动画？
使用JavaScript控制：
element.style.animationPlayState = 'paused'; // 暂停
element.style.animationPlayState = 'running'; // 恢复
七、实战案例合集
案例1：呼吸灯效果
@keyframes breathing {0%, 100% { opacity: 0.5; transform: scale(1); }50% { opacity: 1; transform: scale(1.2); }
}
案例2：加载旋转图标
@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
}
.loader {animation: spin 1s linear infinite;
}
案例3：弹跳小球
@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-50px); }
}
八、浏览器兼容性处理
主流浏览器：Chrome/Firefox/Safari/Edge 等现代浏览器全支持
老旧浏览器：需要添加前缀（可使用PostCSS自动添加）
@-webkit-keyframes {} /* Chrome/Safari */
@-moz-keyframes {} /* Firefox */
@-o-keyframes {} /* Opera */
九、学习资源推荐
- MDN官方文档：MDN @keyframes
- CSS动画可视化工具：CSS Animations Generator
- 动画曲线参考：Easing Functions Cheat Sheet
十、总结
掌握@keyframes只需三步：
1️⃣ 定义关键帧动画
2️⃣ 应用animation属性
3️⃣ 调试参数优化效果
动手实践才是王道！ 看完马上打开编辑器写个会动的方块试试吧！
感谢文章指导：@没事早点睡666
