<p>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: </p> <pre class="brush:php;toolbar:false;">.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"); }</pre> <p><strong>Bearbeiten: Hintergrundbild kann nicht animiert werden, verwenden Sie stattdessen Deckkraft</strong></p> <p>Das Bild wird mit einem Farbverlauf eingeblendet, aber wenn Sie den Mauszeiger abbrechen, wird sofort kein Bild angezeigt, anstatt ausgeblendet zu werden. </p> <pre class="brush:php;toolbar:false;">.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; }</pre> <p><br /></p>

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