CSS3 @keyframes 规则（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在网页设计中，动画效果是提升用户体验的重要手段之一。随着 CSS3 的发展，开发者无需依赖复杂的 JavaScript 或 Flash，就能通过纯 CSS 实现流畅、灵活的动画效果。CSS3 @keyframes 规则作为 CSS 动画的核心机制，为开发者提供了一种声明式的方式，可以精确控制元素在动画过程中的每一个关键帧的变化。无论是简单的按钮悬停效果，还是复杂的粒子运动，@keyframes 都能以简洁的语法和强大的功能满足需求。本文将从基础到进阶，结合实际案例，帮助读者系统掌握这一重要工具。

一、CSS3 @keyframes 规则的基础语法

@keyframes 是 CSS3 引入的关键帧动画规则，它的核心作用是定义动画从开始到结束过程中，元素在不同时间点的样式变化。可以将其想象为一场舞台剧的剧本：@keyframes 负责编写每一帧的“台词”（样式），而动画属性（如 animation）则负责“导演”如何执行这个剧本。

1.1 基本语法结构

/* 定义动画名称为 "example" */  
@keyframes example {  
  /* 0% 是动画的起始状态 */  
  0% {  
    transform: translateX(0px);  
    opacity: 1;  
  }  
  /* 50% 是中间状态 */  
  50% {  
    transform: translateX(200px);  
    opacity: 0.5;  
  }  
  /* 100% 是结束状态 */  
  100% {  
    transform: translateX(400px);  
    opacity: 1;  
  }  
}  

上述代码定义了一个名为 example 的动画，元素会从初始位置（0%）向右移动 400 像素（100%），同时在中间点（50%）时透明度变为 0.5。

1.2 动画的绑定与执行

定义完关键帧后，需要通过 animation 属性将动画绑定到具体元素，并设置动画的时长、播放次数等参数：

/* 将动画应用到 .box 元素 */  
.box {  
  width: 100px;  
  height: 100px;  
  background-color: #4CAF50;  
  /* 调用 @keyframes 定义的动画 */  
  animation-name: example;  
  animation-duration: 2s; /* 动画持续时间 */  
  animation-iteration-count: infinite; /* 无限循环 */  
}  

二、关键帧的控制与样式设计

关键帧的灵活性在于可以自由定义任意百分比或关键点的样式，从而实现复杂的动画效果。

2.1 百分比与关键字的使用

除了 0%、50%、100% 这样的百分比值，开发者还可以使用 from（等同于 0%）和 to（等同于 100%）来简化代码：

@keyframes slide {  
  from {  
    left: 0;  
  }  
  to {  
    left: 100%;  
  }  
}  

此外，开发者还可以在关键帧中插入任意百分比值，例如 25%、75%，甚至 33.333%，以实现更精细的控制。

2.2 多属性联动与样式的叠加

关键帧中的样式可以包含多个 CSS 属性，例如同时修改位置、旋转角度和颜色：

@keyframes spinAndColor {  
  0% {  
    transform: rotate(0deg);  
    background-color: red;  
  }  
  50% {  
    transform: rotate(180deg);  
    background-color: blue;  
  }  
  100% {  
    transform: rotate(360deg);  
    background-color: green;  
  }  
}  

这种叠加方式让动画效果更加生动，但需注意属性的兼容性（例如 transform 属性需要前缀时，需统一添加）。

三、动画属性的深度解析

除了 @keyframes 本身，CSS 还提供了多个与动画相关的属性，共同控制动画的行为。

3.1 动画时序属性

• animation-duration：定义动画的持续时间（单位：秒或毫秒）。
• animation-timing-function：控制动画的速度曲线，默认值为 ease。常见的值包括 linear（匀速）、ease-in-out（先慢后快再慢）等。
• animation-delay：设置动画开始前的延迟时间。

.box {  
  animation-duration: 3s;  
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* 自定义贝塞尔曲线 */  
  animation-delay: 1s;  
}  

3.2 动画方向与循环

• animation-direction：定义动画的播放方向，默认为 normal（正向播放）。可用值包括：
  • alternate：奇数次循环正向播放，偶数次反向播放。
  • reverse：始终反向播放。

/* 示例：动画每两次循环交替方向 */  
.box {  
  animation-direction: alternate;  
}  

3.3 动画填充模式

• animation-fill-mode：控制动画在播放前/后的样式。
  • backwards：动画开始前应用初始关键帧的样式。
  • forwards：动画结束后保持最终关键帧的样式。
  • both：同时应用 backwards 和 forwards。

/* 动画结束后保持最后状态 */  
.box {  
  animation-fill-mode: forwards;  
}  

3.4 动画的暂停与恢复

通过 animation-play-state 属性，开发者可以动态控制动画的暂停（paused）或运行（running）状态：

/* 暂停动画 */  
.box:hover {  
  animation-play-state: paused;  
}  

四、高级技巧与实战案例

4.1 组合多个 @keyframes 动画

通过 animation 属性的多值支持，可以同时运行多个动画：

@keyframes spin { /* 旋转动画 */  
  100% { transform: rotate(360deg); }  
}  
@keyframes fade { /* 淡入淡出动画 */  
  50% { opacity: 0.5; }  
}  

.box {  
  animation: spin 2s infinite, fade 3s alternate; /* 同时运行两个动画 */  
}  

4.2 响应式动画设计

结合媒体查询，可以针对不同设备调整动画参数：

/* 移动端动画速度减半 */  
@media (max-width: 768px) {  
  .box {  
    animation-duration: 1s;  
  }  
}  

4.3 代码示例：加载进度条动画

/* 定义进度条动画 */  
@keyframes progressBar {  
  0% {  
    width: 0%;  
    background-color: #ff6b6b;  
  }  
  50% {  
    width: 100%;  
    background-color: #4ecdc4;  
  }  
  100% {  
    width: 0%;  
    background-color: #45b7d1;  
  }  
}  

/* 应用动画 */  
.progress {  
  height: 20px;  
  background-color: #f5f5f5;  
  animation: progressBar 2s infinite;  
}  

五、常见问题与最佳实践

5.1 动画性能优化

• 避免过度使用复杂变换：例如频繁修改 position 属性可能影响性能，优先使用 transform 和 opacity。
• 使用 will-change 属性：提前告知浏览器元素将发生变换，例如 will-change: transform;。

5.2 兼容性处理

• 使用 Autoprefixer 等工具自动添加浏览器前缀（如 -webkit-）。
• 对于不支持 CSS 动画的老旧浏览器，可通过 @supports 条件判断提供回退方案。

5.3 动画调试技巧

• 利用浏览器开发者工具的“动画”面板查看关键帧和性能数据。
• 使用 animation-duration 的 0.1s 短时测试，快速验证样式逻辑。

六、结论

CSS3 @keyframes 规则凭借其直观的语法和强大的功能，已成为现代网页动画的核心工具。通过合理设计关键帧、搭配动画属性，开发者可以轻松实现从基础到复杂的动画效果。无论是优化用户体验，还是增强视觉表现力，掌握这一规则都将为你的项目带来显著提升。

建议读者通过以下步骤实践：

1. 从简单的移动或颜色变化动画开始；
2. 尝试组合多个动画并叠加效果；
3. 使用调试工具优化性能；
4. 参考案例库（如 CodePen）获取灵感。

通过持续练习与探索，你将发现 CSS3 @keyframes 规则的无限可能。