Frontend Academy · 课时

@keyframes 动画

使用 @keyframes 定义多步骤动画，使用 animation 简写属性应用动画，并控制迭代次数、方向和填充模式。

@keyframes 动画 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

过渡与动画

过渡会在状态发生变化时，在两个状态之间创建动画。@keyframes 动画会自动运行，可以循环、反向播放、无限播放，并定义多个中间步骤，不需要触发条件。

定义 @keyframes

使用 @keyframes 声明动画序列。您可以按百分比（0%、50%、100%）定义状态，也可以使用 from 和 to 关键字。

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

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

animation 简写属性

animation: name duration timing-function delay iteration-count direction fill-mode。使用此简写属性为元素应用动画。

.card {
  animation: fadeIn 0.4s ease-out forwards;
}

.loader {
  animation: pulse 1.5s ease-in-out infinite;
}

animation-iteration-count

设置动画播放的次数。infinite 表示无限循环，数字则表示准确播放相应的次数。

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

.badge {
  animation: bounce 0.6s ease 3; /* plays 3 times */
}

animation-direction

normal（默认）：每次都正向播放。reverse：反向播放。alternate：先正向再反向。alternate-reverse：先反向再正向。alternate 非常适合实现乒乓效果。

@keyframes swing {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}
.pendulum {
  animation: swing 1s ease-in-out infinite alternate;
}

animation-fill-mode

控制元素在动画之前和之后的状态。forwards：元素停留在最后一个关键帧的状态。backwards：在延迟期间应用 from 状态。both：两者都应用。

.entrance {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.2s forwards;
  /* stays visible (opacity: 1) after animation ends */
}

animation-play-state

通过切换 animation-play-state: paused | running，您可以使用 JavaScript 暂停和恢复动画。

// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';

多个动画

用逗号分隔多个动画，即可将它们应用到同一个元素上。每个动画都会独立运行。

.icon {
  animation:
    rotate 2s linear infinite,
    pulse 1.5s ease-in-out infinite alternate;
}

使用 animation-delay 实现错开动画

逐项增加延迟时间，即可错开列表项的动画。借助 JavaScript，CSS 自定义属性可以让这一过程变得简单。

/* CSS */
.list-item {
  animation: slideIn 0.3s ease forwards;
  animation-delay: calc(var(--index) * 60ms);
}

/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
  el.style.setProperty('--index', i);
});

will-change——向浏览器提供提示

will-change: transform 会提示浏览器该属性即将进行动画，从而让浏览器提前将元素提升到自己的合成器图层。请谨慎使用，因为过多的合成器图层会浪费 GPU 内存。

.animated {
  will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');

实践：骨架加载屏幕

骨架屏使用闪烁动画表示内容正在加载。渐变效果会在占位图形上滑过。

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #edf2f7 50%,
    #e2e8f0 75%
  ) 200% 0 / 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

快速检查

哪个 animation-fill-mode 值可以让元素在动画结束后保持最后一个关键帧的状态？

回顾：@keyframes 动画

使用 from/to 或百分比，通过 @keyframes 定义动画。使用 animation 简写属性应用动画。使用 iteration-count 实现循环。使用 alternate 方向实现乒乓效果。使用 fill-mode: forwards 保留最终状态。使用 animation-delay 和 CSS 变量错开动画。使用 transform 和 opacity 关键帧实现流畅的合成动画。

常见问题解答

「@keyframes 动画」课时是免费的吗？

是的 — 「@keyframes 动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「@keyframes 动画」这节课中我会学到什么？

使用 @keyframes 定义多步骤动画，使用 animation 简写属性应用动画，并控制迭代次数、方向和填充模式。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「@keyframes 动画」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy