如何让背景动画在鼠标移出元素时保持当前状态而非返回初始位置？

嘿，这个需求其实挺典型的——默认用CSS :hover 绑定动画的话，鼠标一移开元素就会立刻跳回初始状态，根本留不住动画运行到一半的位置。要解决这个问题，咱们得结合CSS类控制动画和JavaScript实时记录位置来实现，具体思路和代码如下：

为什么原来的方案不行？ #

原来的代码里，动画只在:hover状态下触发，当鼠标离开时，元素会脱离hover状态，动画不仅停止，还会直接重置回初始的background-position: 0 0，这就是为啥会跳回去的核心原因。

解决方案：类+JS联动控制 #

咱们换个思路：用CSS类来触发动画，然后通过JS监听鼠标事件和动画状态，实时记录并固定背景位置。

完整代码示例 #

<style>
div {
  width: 100%;
  height: 200px;
  background: indigo;
  background-image: url('https://abrilexame.files.wordpress.com/2016/11/aurora_borealis_i.jpg?quality=70&strip=info');
  background-position: 0 0; /* 明确初始位置 */
  transition: none; /* 避免默认过渡干扰位置控制 */
}

/* 用类触发动画，替代直接绑定hover */
div.scrolling {
  -webkit-animation: backgroundScroll 5s ease 1;
  -webkit-animation-fill-mode: forwards;
  animation: backgroundScroll 5s ease 1;
  animation-fill-mode: forwards;
}

@keyframes backgroundScroll {
  from { background-position: 0 0; }
  to { background-position: 0px -180px; }
}

@-webkit-keyframes backgroundScroll {
  from { background-position: 0 0; }
  to { background-position: 0px -180px; }
}
</style>

<div id="bgElement"></div>

<script>
const bgElement = document.getElementById('bgElement');
let currentPos = '0 0'; // 用于记录当前背景位置

// 鼠标移入：从上次停止的位置启动动画
bgElement.addEventListener('mouseenter', () => {
  bgElement.style.backgroundPosition = currentPos;
  bgElement.classList.add('scrolling');
});

// 动画结束：记录最终位置并移除动画类
bgElement.addEventListener('animationend', () => {
  currentPos = getComputedStyle(bgElement).backgroundPosition;
  bgElement.classList.remove('scrolling');
});

// 鼠标移出：实时固定当前位置
bgElement.addEventListener('mouseleave', () => {
  // 获取动画运行到的实时位置
  currentPos = getComputedStyle(bgElement).backgroundPosition;
  // 移除动画类并固定位置，防止跳回初始状态
  bgElement.classList.remove('scrolling');
  bgElement.style.backgroundPosition = currentPos;
});
</script>

核心逻辑说明 #

1. CSS层：把动画绑定到.scrolling类上，而非直接绑定:hover，这样我们能通过添加/移除类灵活控制动画的启停。
2. JS层：
   • mouseenter事件：启动动画前先把背景位置重置为上次记录的值，保证每次移入都从停止点继续滚动。
   • mouseleave事件：通过getComputedStyle获取当前动画运行的实时位置，移除动画类的同时把这个位置设为元素的固定背景位置，彻底避免跳回初始状态。
   • animationend事件：当动画完整跑完时，记录最终位置，防止动画结束后鼠标仍在元素上的位置混乱。

这样调整后，不管你在动画运行的哪个阶段移开鼠标，背景都会稳稳停在当前位置，下次鼠标移入还能从该位置继续滚动~

内容的提问来源于stack exchange，提问作者André Ciappina