CSS动画问题：Hover时背景图无法实现淡出效果

我在实现hover时背景图淡入淡出的简单CSS动画时遇到了困难：

初始问题 #

已定义keyframes，但浏览器提示未定义，初始代码如下：

.elementor-section.elementor-element.core-range
  > .elementor-container:hover
  .product-image::before {
  animation: coreRangeBackground 0.3s ease-in-out 0.3s;
  animation-fill-mode: forwards;
}

@keyframes coreRangeBackground {
  100% { background-image: url("./images/core-range-bg.svg"); }
}

.elementor-section.elementor-element.phases-of-the-moon
  > .elementor-container:hover
  .product-image::before {
  animation-name: phasesMoonBackground;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes phasesMoonBackground {
  100% { background-image: url("./images/phases-of-the-moon-bg.svg"); }
}

修改后问题 #

编辑：发现无法对background-image执行动画，已改用opacity属性

现在图片可以平滑淡入，但鼠标移出后会瞬间切换为无图状态，无法实现淡出效果，修改后的代码如下：

.elementor-section.elementor-element.product-card
  > .elementor-container
  .product-image::before {
  transition: all 0.3s ease-in-out;
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
  left: 0;
  display: block;
  content: "";
}

.elementor-section.elementor-element.core-range
  > .elementor-container:hover
  .product-image::before {
  animation: productCardBackgroundHover 0.3s ease-in-out;
  animation-fill-mode: forwards;
  background-image: url("./images/core-range-bg.svg");
}

.elementor-section.elementor-element.phases-of-the-moon
  > .elementor-container:hover
  .product-image::before {
  animation: productCardBackgroundHover 0.3s ease-in-out;
  animation-fill-mode: forwards;
  background-image: url("./images/phases-of-the-moon-bg.svg");
}

@keyframes productCardBackgroundHover {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

解决方案 #

要实现完整的淡入淡出，核心是始终保留背景图，仅通过opacity控制显示/隐藏，利用transition实现双向过渡：

// 基础样式：所有产品卡片伪元素的公共配置
.elementor-section.elementor-element.product-card > .elementor-container .product-image::before {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
  left: 0;
  display: block;
  content: "";
  opacity: 0; // 默认完全透明
  transition: opacity 0.3s ease-in-out; // 统一过渡动画
}

// 给不同卡片设置对应的背景图（默认状态就加载）
.elementor-section.elementor-element.core-range .product-image::before {
  background-image: url("./images/core-range-bg.svg");
}

.elementor-section.elementor-element.phases-of-the-moon .product-image::before {
  background-image: url("./images/phases-of-the-moon-bg.svg");
}

// hover时仅改变opacity，触发淡入；移出时自动过渡回透明，实现淡出
.elementor-section.elementor-element.product-card > .elementor-container:hover .product-image::before {
  opacity: 1;
}

问题原因说明 #

1. 初始代码报错：CSS不支持对background-image属性做渐变动画，只能做离散切换，所以浏览器无法识别你定义的keyframes逻辑，导致出现未定义的提示；
2. 修改后无淡出：之前的代码仅在hover状态才给伪元素设置background-image，鼠标移出后伪元素失去背景图，直接变为空白，自然没有过渡效果。把背景图放在默认状态，只通过opacity控制显示，就能让transition在hover和移出时都生效。

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