动画结束后元素消失是因为默认 animation-fill-mode: none，导致恢复原始样式；使用 animation-fill-mode: forwards 可保持最后一帧状态，需配合 keyframes 中明确的 100% 样式定义，并注意 display/visibility 等属性干扰。
动画结束后元素突然消失，通常是因为 CSS 动画默认不会保留最后一帧的样式。解决方法是用 animation-fill-mode 控制动画前后应用的样式，尤其是让结束状态“停留”住。
为什么动画一结束元素就不见了？
默认情况下，CSS 动画只在执行期间生效（animation-fill-mode: none）。一旦动画完成，元素会立刻恢复到动画开始前的原始样式——比如 opacity: 0、transform: scale(0) 或 display: none 等，看起来就像“消失了”。这不是 bug，而是默认行为。
用 animation-fill-mode: forwards 保持结束状态
这是最常用也最直接的解法。它会让动画最后一帧的样式持续作用于元素，直到被其他样式覆盖或元素被移除。
- 确保在
@keyframes中定义了明确的最终状态（例如100% { opacity: 1; transform: translateX(100px); }） - 在调用动画的元素上设置：
animation-fill-mode: forwards; - 推荐和
animation简写属性一起使用，避免被覆盖：animation: slideIn 0.4s ease-out forwards;
注意与其他属性的配合
单独设 forwards 不一定总能“显形”，还需检查是否被其他样式干扰：
立即学习“前端免费学习笔记（深入）”；
-
别让
display覆盖动画效果：如果动画前设置了display: none，即使opacity变为 1，元素仍不可见。改用visibility: hidden+opacity: 0更安全 -
层级和 visibility 优先级更高：若动画中修改了
opacity，但父容器有visibility: hidden，子元素依然不可见 -
避免
animation-direction: alternate意外回退：如需保持终态，请搭配animation-iteration-count: 1和forwards
其他 fill mode 值的用途参考
虽然 forwards 是主力，但了解其他值有助于调试：
-
backwards：动画开始前（延迟期间）就应用0%的样式 -
both：等价于backwards forwards，兼顾首尾帧 -
none：默认值，不保留任何帧，动画一停就还原
