通过设置 `animation-fill-mode: forwards`，可让 css 动画在播放完毕后保留最后一帧的样式（如 `margin-top: -25px`），避免元素自动恢复初始位置。
在 Web 开发中，常遇到这样的需求：点击按钮触发动画（例如上移一个区块），动画结束后希望元素稳定停留在目标位置，而不是“弹回”原始状态。默认情况下，CSS 动画仅在执行期间影响元素样式，一旦结束，浏览器会清除动画内联效果，恢复到动画前的计算样式——这正是原代码中 .block 无法停留在 -25px 的根本原因。
解决方法非常明确：为动画容器类（此处为 .animation）添加 animation-fill-mode: forwards 声明。该属性指示浏览器在动画播放完成（即到达 100% 关键帧）后，将最终关键帧的样式值保留在元素上，使其成为持续生效的计算样式。
以下是完整、可直接运行的优化代码：
.block {
width: 100px;
height: 100px;
background: green;
}
.animation {
animation: up 750ms ease-out;
animation-fill-mode: forwards; /* ✅ 关键：锁定最终状态 */
}
@keyframes up {
0% {
margin-top: 0;
}
100% {
margin-top: -25px;
}
}$('button').click(function() {
$('.block').addClass('animation');
});⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- animation-fill-mode: forwards 仅作用于动画自然结束时；若动画被 animation-play-state: paused 暂停，或被 remove() / removeClass() 中断，则不会应用最终状态；
- 若需支持多次触发（如反复点击上移/下移），建议配合 animation-direction: normal 和状态重置逻辑（例如移除 .animation 后再添加），或改用 transform: translateY() 配合 will-change: transform 提升性能与可控性；
- 现代实践中，推荐优先使用 transform 替代 margin-top 实现位移（如 transform: translateY(-25px)），因其不触发重排（reflow），性能更优且兼容性良好。
总结：animation-fill-mode: forwards 是控制 CSS 动画“落地态”的核心 CSS 属性，是实现交互动画持久化效果的必备技巧。
