设置animation-fill-mode: forwards后，动画文本为何无法沿动画方向移动？

这是个很常见的CSS动画和元素定位冲突问题，我来帮你理清楚原因和解决办法：

问题根源 #

你设置了animation-fill-mode: forwards后，动画结束时元素会永久保留动画最后一帧的属性值——也就是你的top属性被固定成了动画终点的300px（heading动画）或240px（quote动画）。而左右移动正常，是因为你没给left/right设置动画，这些属性保持默认的auto状态，所以能正常响应手动调整。

最优解决方案：用transform替代top做动画 #

transform: translateY()是做垂直位移动画的首选方案，它不会修改元素的布局属性（比如top），只是在视觉层面移动元素，性能更好，还不会出现属性被锁住的问题：

@keyframes heading {
  from { transform: translateY(0); }
  to { transform: translateY(-50px); } /* 等价于top从350px到300px的位移 */
}

@keyframes quote {
  from { transform: translateY(0); }
  to { transform: translateY(-50px); } /* 等价于top从290px到240px的位移 */
}

即使加上animation-fill-mode: forwards，元素的top属性依然保持默认值，你手动调整top或者继续用transform修改位置时，都能正常生效。

备选方案：动画结束后重置top属性 #

如果你一定要保留top属性的动画，可以通过JavaScript监听动画结束事件，重置top为可调整的状态：

// 假设你的元素有.heading和.quote类
const headingEl = document.querySelector('.heading');
const quoteEl = document.querySelector('.quote');

function resetTopOnAnimationEnd(el) {
  el.addEventListener('animationend', () => {
    el.style.top = 'auto'; // 重置为默认值，也可以设置成你需要的初始值
    // 或者直接移除动画类，让元素回到初始状态
    // el.classList.remove('animated-heading');
  });
}

resetTopOnAnimationEnd(headingEl);
resetTopOnAnimationEnd(quoteEl);

这样动画结束后，top属性不再被固定为动画的最终值，你就能手动调整元素的上下位置了。

内容的提问来源于stack exchange，提问作者PseudoDev