CSS animation won't fade away

Question

I'm trying to solve a simple animation problem where a background image fades in and out on hover. Even though I've defined the keyframe, the web browser says it's undefined:

.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"); }
  }

Edit: Unable to animate background image, use opacity instead

The image fades in with a gradient, but upon canceling the hover, it immediately switches to no image instead of fading out.

.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; }
  }

Answer 1

So the problem is that the opacity is not transitioning, this is because I set the background image on hover, so when there is no hover, the opacity transitions away and then the image disappears immediately naturally:

.elementor-section.elementor-element.product-card
   > .elementor-container
   .product-image::before {
   transition: opacity 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: "";
   opacity: 0;
}

.elementor-section.elementor-element.core-range
   > .elementor-container
   .product-image::before {
   background-image: url("./images/core-range-bg.svg");
}

.elementor-section.elementor-element.core-range
   > .elementor-container:hover
   .product-image::before, 
.elementor-section.elementor-element.phases-of-the-moon
   > .elementor-container:hover
   .product-image::before {
   opacity: 1;
}

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