如何让CSS背景图hover过渡在移出时按已悬停时长反向执行

现有代码的问题根源 #

• background-image属于CSS规范定义的离散非动画属性，本身不支持连续值插值，过渡时只会在动画周期的中点直接跳变到目标值，不存在真正意义上的平滑渐变。你感知到的“10s悬停切换”本质是离散属性触发的阶跃跳变，当中途移出鼠标打断状态时，由于没有连续的动画插值过程，就会直接跳回初始夜景图，出现瞬间切换的体验问题。
• 现有代码未对反向移出的状态绑定统一的过渡规则，进一步放大了跳变的感知。

基础纯CSS平滑过渡实现 #

要解决“移出瞬间跳回”的核心问题，需要绕开background-image的动画限制，改用双层叠层结构+可连续插值的opacity属性实现交叉淡化效果，核心代码如下：

/* 父容器作为叠层的定位基准 */
.background-card {
  position: relative;
  min-height: 400px;
}
/* 两个背景图层绝对定位铺满容器，统一绑定过渡规则 */
.bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 10s linear;
}
/* 夜景层作为底层常驻 */
.bg-night {
  background-image: url('../assets/artworkNight.png');
}
/* 日景层作为上层，初始完全透明 */
.bg-day {
  background-image: url('../assets/artworkDay.png');
  opacity: 0;
}
/* 父元素hover时，日景层完全不透明 */
.background-card:hover .bg-day {
  opacity: 1;
}

实现效果 #

• 悬停时，日景层的不透明度从0线性升高到1，全程10s，和你预期的正向切换速度一致
• 鼠标移出时，日景层会从当前的不透明度值开始，线性过渡回0，完全消除了瞬间跳回的体验问题

纯CSS的能力边界 #

上面的实现可以解决跳变问题，但和你举例的“悬停4s后移出、花4s返回，全程速率完全一致”的要求存在差异：

该实现的反向过渡固定应用10s的静态时长，不管当前动画推进到哪个进度，从当前值回到初始值都需要走完10s的全程。如果要实现“已行进的进度对应返回时长，全程速率不变”的效果，纯CSS的静态规则无法动态匹配当前进度计算对应的过渡时长，需要配合少量JavaScript动态调整过渡时间。

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