异常教程

CSS animation-fill-mode 属性（手把手讲解）

更新时间:

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

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

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

在网页设计中，动画效果能够显著提升用户体验，而 CSS 动画则为开发者提供了一种高效且灵活的实现方式。然而，许多开发者在使用 CSS 动画时，可能会遇到动画结束后元素状态复位、或者动画开始前过渡生硬等问题。这时，CSS animation-fill-mode 属性便能派上用场。它就像一位经验丰富的舞台导演，能够精准控制动画的“前戏”和“余韵”，让动画效果更加自然流畅。本文将深入解析这一属性的核心功能、应用场景及使用技巧，帮助开发者轻松掌握动画控制的艺术。

一、什么是 animation-fill-mode 属性？

animation-fill-mode 属性是 CSS 动画的扩展属性之一，用于定义动画在播放前或播放后的状态。它允许开发者控制动画在以下三个时间段的行为：

  1. 动画开始前（即 animation-delay 时间段内）
  2. 动画播放期间（即动画执行时）
  3. 动画结束后（即动画循环结束或被停止后）

通过这一属性，开发者可以避免动画元素在初始或结束时出现突兀的跳转，例如让按钮在悬停动画结束后保持放大状态，或让进度条在动画开始前就显示初始进度值。

二、animation-fill-mode 的四个关键值

该属性共有四个可用值：none、forwards、backwards 和 both。接下来将逐一解析它们的含义及使用场景，并通过代码示例说明其效果。

1. none（默认值）

当设置为 none 时，动画仅在播放期间生效，结束后元素会立即恢复到原始样式。
适用场景：需要动画完全不干扰元素原始状态的情况，例如短暂的弹跳效果。

/* 示例代码：按钮点击后的弹跳动画 */
.button {
  animation: bounce 0.5s ease-out;
  animation-fill-mode: none;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  20% { transform: translateY(-20px); }
  50% { transform: translateY(0); }
  80% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

效果描述：按钮在点击后会上下弹跳，但动画结束后会立即回到初始位置。

2. forwards

设置为 forwards 时，动画在播放结束后会保持最后一帧的状态。
适用场景：需要元素在动画结束后停留在最终状态，例如按钮悬停时的放大效果。

/* 示例代码：按钮悬停放大并保持 */
.button {
  animation: grow 0.3s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes grow {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

效果描述：当用户将鼠标移入按钮时，按钮会逐渐放大到 1.2 倍，并在动画结束后保持放大状态。

3. backwards

此值表示动画在播放前会应用第一帧的样式。
适用场景：需要动画开始前就呈现初始状态，例如进度条在动画启动前就显示初始进度。

/* 示例代码：进度条动画前的初始状态显示 */
.progress-bar {
  width: 0%;
  animation: progress 2s linear;
  animation-delay: 1s; /* 延迟1秒后开始动画 */
  animation-fill-mode: backwards;
}

@keyframes progress {
  0% { width: 0%; }
  100% { width: 100%; }
}

效果描述：进度条在动画开始前（即延迟的1秒内）就会直接显示 width: 0% 的初始状态，而非等待动画触发后再变化。

4. both

该值是 forwards 和 backwards 的组合，同时应用动画的前后两种行为。
适用场景：需要动画在开始前和结束后都保持特定状态，例如复杂的加载动画。

/* 示例代码：加载动画的完整控制 */
.loader {
  opacity: 0;
  animation: spin 1.5s linear infinite;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

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

效果描述：加载图标在动画开始前（延迟的0.5秒内）会直接显示 opacity: 0 的透明状态，动画结束后则会保持最后一帧的旋转角度。

三、animation-fill-mode 与其他动画属性的协同

要完全掌握这一属性，需结合其他 CSS 动画相关属性（如 animation-delay、animation-duration）共同使用，以实现更复杂的效果。

案例1：按钮的“悬停+点击”组合动画

通过 forwards 和 backwards 的配合，可以设计按钮在悬停时平滑过渡到放大状态，并在点击后保持放大效果。

.button {
  transition: transform 0.2s ease-out;
  animation: none;
  animation-fill-mode: none;
}

.button:hover {
  animation: grow 0.3s ease-in-out forwards;
}

.button:active {
  animation: shrink 0.1s linear forwards;
}

@keyframes grow {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

@keyframes shrink {
  0% { transform: scale(1.1); }
  100% { transform: scale(0.9); }
}

效果描述：鼠标悬停时按钮放大，离开后恢复；点击时短暂缩小，模拟物理反馈。

案例2：进度条的“预加载+动画”组合

利用 backwards 属性，可以让进度条在动画启动前就显示初始值，避免“从零突然跳动”的突兀感。

.progress-container {
  width: 200px;
  height: 20px;
  background-color: #eee;
  position: relative;
}

.progress {
  height: 100%;
  background-color: #4CAF50;
  width: 0%;
  animation: fill 2s linear;
  animation-delay: 1s;
  animation-fill-mode: backwards;
}

@keyframes fill {
  0% { width: 0%; }
  100% { width: 100%; }
}

效果描述：进度条在1秒延迟内直接显示 width: 0%，随后平滑填充至100%。

四、常见问题与最佳实践

问题1：为什么动画结束后元素没有保持状态？

可能原因：未设置 animation-fill-mode: forwards，或动画未正确绑定到元素。
解决方法：检查代码中是否遗漏了 forwards 值，并确保动画名称与 @keyframes 定义一致。

问题2：动画开始前的状态跳动明显？

可能原因：未使用 backwards 属性，导致元素在动画开始前处于默认样式。
解决方法：添加 animation-fill-mode: backwards，并确保 @keyframes 的第一帧样式与预期初始状态一致。

最佳实践建议

  1. 明确需求：在设计动画前，明确元素在播放前、播放中和播放后的期望状态。
  2. 组合使用：对于复杂场景，可结合 both 值与 animation-delay，实现更精细的控制。
  3. 测试兼容性：虽然 animation-fill-mode 在现代浏览器中广泛支持，但仍需通过 Can I Use 等工具确认目标浏览器的兼容性。

五、进阶技巧：通过 fill-mode 实现“伪暂停”效果

通过巧妙设置 animation-fill-mode 和 animation-play-state，可以实现动画的“暂停后保持状态”效果。

.paused-animation {
  animation-play-state: paused;
  animation-fill-mode: forwards;
}

应用场景：在游戏或交互界面中，当用户暂停操作时，保持动画的最后一帧状态，增强用户体验。

六、总结与展望

CSS animation-fill-mode 属性是开发者控制动画生命周期的重要工具，它通过四个关键值解决了动画开始前和结束后的状态问题。无论是简单的按钮悬停效果，还是复杂的加载动画，合理使用这一属性都能显著提升视觉流畅度。

随着 CSS 动画技术的不断演进，开发者可以结合 @keyframes、transition 等属性，创造出更具创意的交互效果。建议读者通过实际项目反复实践，逐步掌握动画控制的“黄金法则”——动画不仅是视觉表现，更是用户体验的延伸。

通过本文的学习，相信开发者已经能够熟练运用 CSS animation-fill-mode 属性，并将其灵活应用于实际开发中。接下来，可以尝试挑战更复杂的动画场景，例如结合 JavaScript 实现动态切换 fill-mode 值，或探索 CSS 动画与 Web Animation API 的结合使用。

最新发布

查看更多文章