animation-fill-mode: forwards 要生效，必须在@keyframes中完整定义100%关键帧、确保动画真正执行完毕、避免被更高优先级样式覆盖，并在animation简写中显式声明forwards。

直接加 animation-fill-mode: forwards 就能保持终态，但光写这一句常不管用——关键帧没写全、动画没真正结束、或者被其他样式覆盖，都会导致“写了却跳回”的假象。

必须显式定义 100% 或 to 关键帧

浏览器不会自动推导终态。哪怕你只漏了 transform 或 opacity 中的一个属性，forwards 锁住的就是那个不完整的值，甚至可能是元素原始的 transform: none。

• ✅ 正确写法：在 @keyframes 里完整写出终态所有相关属性
• ❌ 错误写法：只写 0% 和 50%，指望浏览器“猜”出 100%
• 示例：滑入动画要停在右侧，100% { transform: translateX(200px); opacity: 1; } 必须全部写明

确保动画真正执行并结束

forwards 只在动画完成时生效。如果动画根本没走到终点，它就不起作用。

• 检查 animation-iteration-count 是否为 1（或有限次数），避免设成 infinite
• 确认没有用 animation-play-state: paused 暂停在中途
• 注意 animation-direction: alternate 会来回播放，终态可能不是你预期的 to 帧

避免样式被更高优先级规则覆盖

即使 forwards 成功锁定了终态，一条内联样式或更强选择器的 opacity: 1 也能把它顶掉。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 排查是否在动画后又通过 class 或 JS 设置了冲突样式（比如 style="transform: none"）
• 慎用 display: none 配合动画：它会直接移除渲染，opacity: 0 + visibility: hidden 更可控
• 简写 animation 属性时，务必把 forwards 显式带上，否则会被重置为 none

推荐写法：简写中一并声明

最稳妥的方式是在 animation 简写里直接包含 forwards，避免遗漏或被覆盖：

.box { animation: slideIn 0.4s ease-out 0.1s 1 forwards; }

这样既明确迭代次数，又确保填充模式生效，语义清晰也不易出错。