CSS动画hover时临时偏离后恢复的实现方案求助

问题核心在于CSS动画的属性优先级高于常规样式，哪怕暂停动画，元素的background-color依然由关键帧动画控制，所以直接在hover状态修改背景色不会生效。下面给出结合CSS和JavaScript的可行方案：

实现代码 #

HTML #

<div id='box'></div>

CSS #

#box {
  width: 100px;
  height: 100px;
  background-color: #ffcccc;
  /* 保留背景色过渡，实现hover前后的平滑切换 */
  transition: background-color 0.2s ease;
}

/* 用独立类控制动画，方便动态添加/移除 */
.color-cycle {
  animation: cycleColor 2s infinite linear;
}

@keyframes cycleColor {
  0% { background-color: #ffcccc; }
  50% { background-color: #ccccff; }
}

#box:hover {
  background-color: yellow;
}

JavaScript #

const box = document.getElementById('box');
const animationDuration = 2000; // 与CSS中动画时长保持一致
let animationStartTime = Date.now();
let pausedProgress = 0;

// 初始化启动动画
box.classList.add('color-cycle');

box.addEventListener('mouseenter', () => {
  // 计算当前动画已运行的时长，取模得到循环内的进度
  const elapsed = Date.now() - animationStartTime;
  pausedProgress = elapsed % animationDuration;
  // 移除动画类，让常规背景色样式生效
  box.classList.remove('color-cycle');
});

box.addEventListener('mouseleave', () => {
  // 设置负延迟，让动画直接跳到暂停时的进度点
  box.style.animationDelay = `-${pausedProgress}ms`;
  // 重新启动动画
  box.classList.add('color-cycle');
  // 更新动画起始时间，保证后续进度计算准确
  animationStartTime = Date.now() - pausedProgress;
  
  // 清除延迟设置，避免影响下一次动画循环
  setTimeout(() => {
    box.style.animationDelay = '';
  }, 0);
});

方案原理 #

1. 动画类分离：把动画逻辑放到独立的.color-cycle类中，hover时移除该类，让常规的background-color样式和过渡效果生效，实现平滑切换到黄色。
2. 进度记录与续播：通过计算动画运行的时长，记录暂停时的进度；鼠标移开时利用**负animationDelay**让动画直接从暂停的进度点开始播放，而非从头循环。
3. 过渡兼容：保留transition属性，确保鼠标移开时，黄色能平滑过渡到动画暂停位置的颜色，同时动画无缝续播。

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