异常教程

HTML DOM Style animationFillMode 属性（千字长文）

更新时间:

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

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

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 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+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代网页开发中，CSS 动画已成为增强用户体验的核心工具之一。无论是按钮的悬停效果、加载进度条的动态展示，还是页面元素的优雅过渡，动画的流畅性与精准控制都至关重要。然而，开发者常常会遇到一个关键问题：如何让动画在播放前后保持特定的视觉效果？ 这正是 animationFillMode 属性的用武之地。

本文将从基础概念出发，逐步解析 animationFillMode 的原理、应用场景及代码实现。通过形象的比喻、实际案例和代码示例，帮助编程初学者和中级开发者快速掌握这一属性，提升动画设计的灵活性与可控性。

一、基础概念：动画生命周期与填充值的作用

1.1 动画的“生命周期”

CSS 动画分为四个阶段：

  1. 动画播放前：元素处于初始状态，未触发动画。
  2. 动画播放中：根据 @keyframes 定义的规则，元素属性随时间变化。
  3. 动画播放后：动画完成所有迭代（循环）或停止。

animationFillMode 的核心作用，就是控制动画在 播放前 和 播放后 的视觉表现。

1.2 填充值（Fill Mode）的比喻

想象一个舞台表演：

  • 动画播放前：演员尚未登场，舞台可能保持黑暗（默认状态）。
  • 动画播放后：演员退场后，舞台是否保留表演结束时的布景？

animationFillMode 就像舞台导演，决定元素在动画开始前或结束后是否“冻结”在特定状态。

二、核心知识点详解：animationFillMode 的四种模式

2.1 none：默认状态，无填充值

这是最基础的模式。

  • 作用：动画播放前后，元素均恢复到初始 CSS 样式。
  • 适用场景：需要动画完全“干净”地结束，不残留任何中间状态。

代码示例：

.animated-element {
  animation: fade-in 2s;
  animation-fill-mode: none;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

效果：元素从透明到不透明，动画结束后恢复为初始透明度（假设初始 CSS 中未定义 opacity）。

2.2 forwards：动画结束后保持最终状态

  • 作用：动画播放结束后，元素保持最后一帧的样式。
  • 比喻：演员退场后，舞台保留表演结束时的布景。

代码示例：

.animated-element {
  animation: expand 1s;
  animation-fill-mode: forwards;
}

@keyframes expand {
  0% { width: 50px; }
  100% { width: 200px; }
}

效果：元素在动画结束后仍保持 200px 的宽度，即使动画已停止。

2.3 backwards：动画开始前保持初始状态

  • 作用：在动画开始前，元素提前应用动画的起始样式。
  • 常见用途：解决“动画延迟前的闪烁”问题。

代码示例：

.animated-element {
  animation: spin 2s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
}

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

效果：在动画延迟的 1s 内，元素已提前应用 rotate(0deg)，避免了“突然旋转”的突兀感。

2.4 both：结合前后两种模式

  • 作用：同时应用 forwards 和 backwards 的效果。
  • 适用场景：需要动画在开始前和结束后都保持指定状态。

代码示例：

.animated-element {
  animation: pulse 1s infinite;
  animation-fill-mode: both;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

效果：动画无限循环时，始终以 opacity: 1 开始，并在每次循环结束时保持 opacity: 1。

三、进阶用法：与动画属性的协同设计

3.1 结合 animation-delay

通过 backwards 和 animation-delay，可以实现“预加载”效果：

.loader {
  animation: spin 2s linear;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}

效果：元素在延迟的 0.5s 内已开始旋转，而非等待延迟结束后才触发动画。

3.2 多动画叠加场景

当元素应用多个动画时，需为每个动画单独指定 animationFillMode。例如：

.multi-animation {
  animation: 
    color-change 3s forwards,
    size-expand 2s both;
}

3.3 动态修改 fillMode 的值

通过 JavaScript 的 style 属性，可动态切换 animationFillMode：

document.querySelector('.element').style.animationFillMode = 'backwards';

四、实际案例：按钮的悬停动画

4.1 需求分析

设计一个按钮，点击后：

  1. 按钮收缩（缩小为原尺寸的 50%）。
  2. 动画结束后保持收缩状态。

4.2 代码实现

.button {
  width: 200px;
  transition: all 0.3s;
}

.button:active {
  animation: shrink 0.3s forwards;
}

@keyframes shrink {
  0% { transform: scale(1); }
  100% { transform: scale(0.5); }
}

效果：点击按钮时，按钮会收缩并保持最终状态，直到用户手动重置。

五、常见问题与解决方案

5.1 为什么 fillMode 没有生效？

  • 检查属性拼写：animationFillMode 是 CSS 属性，需使用 camelCase（如 JavaScript 中的 animationFillMode）。
  • 优先级问题：确保 animation-fill-mode 的 CSS 声明未被其他规则覆盖。
  • 动画是否播放：若动画未触发（如 animation-duration 为 0s），fillMode 无效。

5.2 如何调试 fillMode 的效果？

  • 分步验证：单独测试 forwards 和 backwards，再组合使用。
  • 控制台日志：在 JavaScript 中打印动画状态，确认属性应用是否成功。

六、结论

HTML DOM Style animationFillMode 属性 是 CSS 动画设计中不可或缺的工具，它赋予开发者对动画前后状态的精准控制。通过理解其四种模式（none、forwards、backwards、both）及实际案例的实践，开发者可以更灵活地设计出流畅、自然的交互效果。

无论是简单的按钮动画，还是复杂的页面过渡，合理运用 animationFillMode，都能显著提升用户体验。建议读者通过修改示例代码中的值，亲身体验不同模式带来的视觉差异，从而在项目中游刃有余地应用这一属性。

掌握 animationFillMode，不仅是技术能力的提升，更是对用户需求的深刻理解——毕竟，好的动画设计，应当让用户感受到“无缝衔接”的体验。

最新发布

查看更多文章