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

第七种黄昏

于 2025-05-08 11:30:00 发布

阅读量649

点赞数 26

文章标签： css 前端

本文链接：https://blog.csdn.net/2401_83607690/article/details/147775201

版权

新手福利 -- 还在为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