CSS animation 关键帧动画

目录

一、CSS Animation 基本概念

二、核心属性详解（animation 的子属性）

三、基本语法与用法

1. 定义关键帧：@keyframes

2. 应用动画到元素

3. 多个动画同时应用

四、高级技巧与性能优化

1. 使用 transform 和 opacity 提升性能

2. 使用 will-change 提示浏览器优化

3. 动画状态控制（配合 JavaScript）

五、实际项目中的应用场景与示例

场景 1：页面加载动画（Loading Spinner）

场景 2：按钮悬停反馈（Hover Effect）

场景 3：导航菜单滑入动画（Slide-in Menu）

场景 4：卡片入场动画（Staggered Animation）

场景 5：错误提示抖动反馈（Error Shake）

六、总结

一、CSS Animation 基本概念

CSS 动画（Animation）是 CSS3 引入的一项强大功能，允许开发者在不依赖 JavaScript 或 Flash 的情况下，为网页元素创建平滑、可控制的视觉变化。它通过定义关键帧（@keyframes）和应用动画属性（animation）来实现元素从一种样式状态过渡到另一种状态的过程。

与 CSS transition 相比，animation 更加灵活和强大：

• transition：只能定义两个状态之间的过渡（如 hover → normal）。
• animation：可以定义多个中间状态（关键帧），支持循环、延迟、方向控制等，适用于复杂动画。

二、核心属性详解（animation 的子属性）

animation 是一个复合属性，由多个子属性组成。以下是每个子属性的详细说明：

• animation-name：指定由 @keyframes 定义的动画名称，用于将关键帧动画绑定到元素上。
  • 默认值：none（表示无动画）
• animation-duration：定义动画完成一个完整周期所需的时间，可以设置秒（s）或毫秒（ms）。
  • 默认值：0s（即动画瞬间完成）
• animation-timing-function：控制动画在每个周期内的速度曲线（缓动函数）。
  • ease：慢开始，快中间，慢结束（默认）
  • linear：匀速运动
  • ease-in：慢开始
  • ease-out：慢结束
  • ease-in-out：慢开始和慢结束
  • cubic-bezier(n,n,n,n)：自定义贝塞尔曲线
• animation-delay：设置动画开始前的延迟时间，即动画何时启动。
  • 可以为负值（表示动画从中间开始播放）
  • 默认值：0s
• animation-iteration-count：定义动画播放的次数。
  • infinite：无限循环播放
  • 默认值：1
• animation-direction：指定动画方向。
  • normal：正常方向播放（默认）
  • reverse：反向播放（从 100% 到 0%）
  • alternate：奇数次正向，偶数次反向
  • alternate-reverse：奇数次反向，偶数次正向
• animation-fill-mode：定义动画执行之后的值。
  • none：不保留任何样式（默认）
  • forwards：保持动画最后一帧的样式
  • backwards：在 animation-delay 期间应用第一帧样式
  • both：同时应用 forwards 和 backwards 的行为
• animation-play-state：控制动画的运行或暂停状态，常用于与 JavaScript 交互实现动态控制。
  • running：动画正在运行（默认）
  • paused：动画暂停

示例：可用于鼠标悬停暂停动画 :hover { animation-play-state: paused; }

✅ 提示：这些属性可以合并为一行简写语法：

实际开发中，通常只写必要的部分，未声明的属性将使用默认值。

animation: <name> <duration> <timing-function> <delay> 
           <iteration-count> <direction> <fill-mode> <play-state>;

animation: slideIn 0.6s ease-out 0.2s infinite alternate forwards running;

这些核心属性共同构成了 CSS 动画的完整控制体系，灵活组合可实现从简单过渡到复杂交互动画的各类效果。

三、基本语法与用法

1. 定义关键帧：@keyframes

@keyframes 用于定义动画的中间状态。可以使用 from/to 或百分比 0% ~ 100%。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 或使用百分比 */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

⚠️ 注意：@keyframes 必须定义在全局作用域中，不能嵌套在选择器内。

2. 应用动画到元素

.card {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

✅ forwards 表示动画结束后保持最后一帧样式（即 opacity: 1），否则会恢复到原始状态。

3. 多个动画同时应用

.balloon {
  animation: float 3s ease-in-out infinite, pulse 2s ease infinite;
}

四、高级技巧与性能优化

1. 使用 transform 和 opacity 提升性能

这些属性由 GPU 加速，不会触发重排（reflow）或重绘（repaint），动画更流畅。

✅ 推荐：

transform: translateX(100px);
opacity: 0.5;

❌ 避免：

left: 100px; /* 触发重排 */
width: 200px; /* 触发重排 */

2. 使用 will-change 提示浏览器优化

.element {
  will-change: transform, opacity;
}

仅在必要时使用，避免滥用。

3. 动画状态控制（配合 JavaScript）

.loading {
  animation: spin 1s linear infinite;
}

.loading.pause {
  animation-play-state: paused;
}

JavaScript 控制：

document.querySelector(".loading").classList.add("pause");

五、实际项目中的应用场景与示例

场景 1：页面加载动画（Loading Spinner）

需求：用户进入页面时显示加载动画，提升等待体验。

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 50px auto;
}

✅ 优点：纯 CSS 实现，轻量、无 JS 依赖。

场景 2：按钮悬停反馈（Hover Effect）

需求：增强按钮交互感，提升用户体验。

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.btn {
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn:hover {
  animation: pulse 0.3s ease-in-out;
  background: #0056b3;
}

💡 技巧：结合 transition 用于颜色变化，animation 用于复杂动画（如缩放）。

场景 3：导航菜单滑入动画（Slide-in Menu）

需求：移动端菜单从左侧滑入，提升视觉层次。

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  height: 100vh;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
}

.nav-menu.open {
  animation: slideInLeft 0.4s ease-out forwards;
}

✅ forwards 确保动画结束后菜单保持在可视位置。

场景 4：卡片入场动画（Staggered Animation）

需求：多个卡片依次淡入，营造“逐个出现”的视觉节奏。

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  opacity: 0;
}

.card:nth-child(1) {
  animation: fadeInUp 0.6s ease-out 0.2s forwards;
}
.card:nth-child(2) {
  animation: fadeInUp 0.6s ease-out 0.4s forwards;
}
.card:nth-child(3) {
  animation: fadeInUp 0.6s ease-out 0.6s forwards;
}

✅ 使用 nth-child 配合不同 animation-delay 实现交错动画（stagger effect）。

场景 5：错误提示抖动反馈（Error Shake）

需求：表单验证失败时，输入框抖动提示用户。

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

.input-error {
  animation: shake 0.5s ease-in-out;
  border-color: #dc3545;
}

✅ 短促、有力的动画能有效吸引用户注意。

六、总结

CSS animation 是现代 Web 开发中不可或缺的技能。掌握它不仅能提升页面视觉表现力，还能增强用户体验。建议在项目中多尝试结合 @keyframes 与 JavaScript 动态控制类名，实现更丰富的交互动画。

如需进一步学习，可探索：

• CSS Animation API
• animate() 方法（JavaScript）
• 第三方库如 Animate.css 快速集成动画