CSS-Animationen werden nicht ausgeblendet

Question

Ich versuche ein einfaches Animationsproblem zu lösen, bei dem ein Hintergrundbild beim Schweben ein- und ausgeblendet wird. Obwohl ich den Keyframe definiert habe, meldet der Webbrowser, dass er nicht definiert ist:

.elementor-section.elementor-element.core-range
     > .elementor-container:hover
     .product-image::before {
     Animation: coreRangeBackground 0,3 s Easy-in-out 0,3 s;
     Animationsfüllmodus: vorwärts;
  }

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

  .elementor-section.elementor-element.phases-of-the-moon
     > .elementor-container:hover
     .product-image::before {
     Animationsname: PhasesMoonBackground;
     Animationsdauer: 0,3s;
     Animation-Timing-Funktion: Easy-in-out;
     Animationsverzögerung: 0,3 s;
     Animationsfüllmodus: vorwärts;
  }

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

Bearbeiten: Hintergrundbild kann nicht animiert werden, verwenden Sie stattdessen Deckkraft

Das Bild wird mit einem Farbverlauf eingeblendet, aber wenn Sie den Mauszeiger abbrechen, wird sofort kein Bild angezeigt, anstatt ausgeblendet zu werden.

.elementor-section.elementor-element.product-card
     > .elementor-container
     .product-image::before {
     Übergang: alle 0,3 s Ease-in-out;
     Position: absolut;
     Breite: 100 %;
     Höhe: 100 %;
     Hintergrundwiederholung: keine Wiederholung;
     Hintergrundgröße: Cover;
     oben: 0;
     links: 0;
     Bildschirmsperre;
     Inhalt: "";
  }

  .elementor-section.elementor-element.core-range
     > .elementor-container:hover
     .product-image::before {
     Animation: productCardBackgroundHover 0,3 s einfaches Ein- und Ausfahren;
     Animationsfüllmodus: vorwärts;
     Hintergrundbild: url("./images/core-range-bg.svg");
  }

  .elementor-section.elementor-element.phases-of-the-moon
     > .elementor-container:hover
     .product-image::before {
     Animation: productCardBackgroundHover 0,3 s einfaches Ein- und Ausfahren;
     Animationsfüllmodus: vorwärts;
     Hintergrundbild: url("./images/phases-of-the-moon-bg.svg");
  }

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

Answer 1

所以问题是不透明度没有过渡，这是因为我在悬停时设置了背景图像，所以当没有悬停时，不透明度会过渡消失，然后图像自然地立即消失：

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