<p>我在嘗試解決一個簡單的動畫問題，即在懸停時背景圖像淡入淡出。儘管我已經定義了關鍵幀，但網頁瀏覽器顯示未定義：</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>編：無法對背景圖片進行動畫處理，改為使用不透明度</strong></p> <p>影像以漸變的方式淡入，但在取消懸停後，它立即切換到沒有影像，而不是漸出。 </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>

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