Animasi CSS tidak akan pudar

Question

Saya cuba menyelesaikan masalah animasi mudah di mana imej latar belakang memudar masuk dan keluar semasa tuding. Walaupun saya telah menentukan kerangka utama, penyemak imbas web mengatakan ia tidak ditentukan:

.elementor-section.elementor-element.core-range
     > .elementor-container:hover
     .product-image::before {
     animasi: coreRangeBackground 0.3s kemudahan-keluar 0.3s;
     mod-isi-animasi: ke hadapan;
  }

  @keyframes coreRangeBackground {
     100% { background-image: url("./images/core-range-bg.svg" }
  }

  .bahagian-elemen.elemen-elemen.fasa-bulan
     > .elementor-container:hover
     .product-image::before {
     animasi-nama: phasesMoonBackground;
     tempoh animasi: 0.3s;
     animasi-fungsi-masa: kemudahan-keluar;
     kelewatan animasi: 0.3s;
     mod-isi-animasi: ke hadapan;
  }

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

Edit: Tidak dapat menghidupkan imej latar belakang, sebaliknya gunakan kelegapan

Imej memudar dengan kecerunan, tetapi setelah membatalkan tuding, ia serta-merta bertukar kepada tiada imej dan bukannya pudar.

.elementor-section.elementor-element.product-card
     > .elemen-bekas
     .product-image::before {
     peralihan: semua 0.3s mudah masuk;
     jawatan: mutlak;
     lebar: 100%;
     ketinggian: 100%;
     background-repeat: tidak-ulang;
     saiz latar belakang: penutup;
     atas: 0;
     kiri: 0;
     paparan: blok;
     kandungan: "";
  }

  .elementor-section.elementor-element.core-range
     > .elementor-container:hover
     .product-image::before {
     animasi: productCardBackgroundHover 0.3s kemudahan-keluar;
     mod-isi-animasi: ke hadapan;
     imej latar belakang: url("./images/core-range-bg.svg");
  }

  .bahagian-elemen.elemen-elemen.fasa-bulan
     > .elementor-container:hover
     .product-image::before {
     animasi: productCardBackgroundHover 0.3s kemudahan-keluar;
     mod-isi-animasi: ke hadapan;
     imej latar belakang: url("./images/phases-of-the-moon-bg.svg");
  }

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

Answer 1

Jadi masalahnya ialah kelegapan tidak beralih, ini kerana saya menetapkan imej latar belakang pada tuding, jadi apabila tiada tuding, kelegapan beralih dan kemudian imej hilang serta-merta secara semula jadi:

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