CSS animation won't fade away
P粉352408038
2023-08-18 16:45:01
<p>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: </p>
<pre class="brush:php;toolbar:false;">.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"); }
}</pre>
<p><strong>Edit: Unable to animate background image, use opacity instead</strong></p>
<p>The image fades in with a gradient, but upon canceling the hover, it immediately switches to no image instead of fading out. </p>
<pre class="brush:php;toolbar:false;">.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; }
}</pre>
<p><br /></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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"); }