网站导航
> 技术文档 > 万字详解CSS动画核心——@keyframes，看完就会做动画！

万字详解CSS动画核心——@keyframes，看完就会做动画！

网友: 技术文档 2025-07-30 11:50:33

新手福利  --  还在为CSS动画发愁？一篇搞定@keyframes所有知识点！

一、什么是@keyframes？

‌简单说‌：@keyframes 是CSS3的 ‌动画关键帧规则‌，就像导演给动画片分镜头一样，你可以定义动画在不同时间点的样式变化。

‌举个栗子🌰‌：
想让一个方块从左到右移动，你需要告诉浏览器：

  • 开始时（0%）在左边
  • 结束时（100%）在右边

这就是@keyframes的核心作用！

二、最简语法结构（5秒上手）
@keyframes 动画名称 { 0% { /* 初始状态样式 */ } 50% { /* 中间状态样式 */ } 100% { /* 结束状态样式 */ }}

‌参数解释表‌：

组成部分 说明 必填 @keyframes 声明动画的关键字 ✅ 动画名称 自定义的动画名字（如：move） ✅ 0% / from 动画开始时的样式 ✅ 100% / to 动画结束时的样式 ✅ 中间百分比（如50%） 动画执行到一半时的样式 ❌
三、手把手创建第一个动画（代码+效果）

‌目标‌：让一个方块水平向右移动200px

‌HTML‌：

‌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; }}
   Document  .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; } }

效果：红 → 黄（放大） → 绿(可复制代码到VScode里观察，不便显示视频)

2. 组合动画
@keyframes combo { 0% { transform: translateX(0) rotate(0); } 50% { transform: translateX(200px) rotate(180deg); } 100% { transform: translateX(0) rotate(360deg); }}

效果：移动 + 旋转组合动画

六、常见问题解答（新手避坑指南）

 问题1‌：为什么我的动画不生效？
   检查步骤：

  1. 是否定义了@keyframes名称
  2. 元素是否应用了animation属性
  3. 是否存在拼写错误

问题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

网络标签：

相关问题