L'animation CSS ne disparaîtra pas

Question

J'essaie de résoudre un problème d'animation simple dans lequel une image d'arrière-plan apparaît et disparaît en survol. Même si j'ai défini l'image clé, le navigateur Web indique qu'elle n'est pas définie :

.elementor-section.elementor-element.core-range
     > .elementor-conteneur : survol
     .product-image::avant {
     animation : coreRangeBackground 0,3 s, facilité d'entrée et de sortie 0,3 s ;
     animation-fill-mode : avant ;
  }

  @keyframes coreRangeBackground {
     100 % { image d'arrière-plan : url("./images/core-range-bg.svg" }
  }

  .elementor-section.elementor-element.phases-de-la-lune
     > .elementor-conteneur : survol
     .product-image::avant {
     nom de l'animation : phasesMoonBackground ;
     durée de l'animation : 0,3 s ;
     fonction de synchronisation d'animation : entrée et sortie faciles ;
     délai d'animation : 0,3 s ;
     animation-fill-mode : avant ;
  }

  @keyframes phasesMoonBackground {
     100 % { image d'arrière-plan : url("./images/phases-of-the-moon-bg.svg" }
  }
Modifier : impossible d'animer l'image d'arrière-plan, utilisez plutôt l'opacité
L'image apparaît en fondu avec un dégradé, mais lors de l'annulation du survol, elle passe immédiatement à aucune image au lieu de disparaître en fondu. 
.elementor-section.elementor-element.product-card
     > .elementor-conteneur
     .product-image::avant {
     transition : tous les 0,3 s facilitent l'entrée et la sortie ;
     position : absolue ;
     largeur : 100 % ;
     hauteur : 100 % ;
     répétition d'arrière-plan : pas de répétition ;
     taille de l'arrière-plan : couverture ;
     haut : 0 ;
     gauche : 0 ;
     bloc de visualisation;
     contenu: "";
  }

  .elementor-section.elementor-element.core-range
     > .elementor-conteneur : survol
     .product-image::avant {
     animation : facilité d'entrée et de sortie de productCardBackgroundHover 0,3 s ;
     animation-fill-mode : avant ;
     image d'arrière-plan : url("./images/core-range-bg.svg");
  }

  .elementor-section.elementor-element.phases-de-la-lune
     > .elementor-conteneur : survol
     .product-image::avant {
     animation : facilité d'entrée et de sortie de productCardBackgroundHover 0,3 s ;
     animation-fill-mode : avant ;
     image d'arrière-plan : url("./images/phases-of-the-moon-bg.svg");
  }

  @keyframes productCardBackgroundHover {
     0% { opacité : 0 ;
     100 % { opacité : 1 ;
  }

Answer 1

Donc le problème c'est que l'opacité ne fait pas de transition, c'est parce que j'ai mis l'image d'arrière-plan en survol, donc quand il n'y a pas de survol, l'opacité s'éloigne puis l'image disparaît tout de suite naturellement :

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