CSS 애니메이션은 사라지지 않습니다.

Question

마우스를 올리면 배경 이미지가 페이드 인 및 페이드 아웃되는 간단한 애니메이션 문제를 해결하려고 합니다. 키프레임을 정의했는데도 웹 브라우저에 정의되지 않았다고 표시됩니다.

.elementor-section.elementor-element.core-range
     > .elementor-컨테이너:호버
     .product-image::이전 {
     애니메이션: coreRangeBackground 0.3초 easy-in-out 0.3초;
     애니메이션 채우기 모드: 앞으로;
  }

  @keyframes coreRangeBackground {
     100% { 배경 이미지: url("./images/core-range-bg.svg") }
  }

  .elementor-section.elementor-element.phases-of-the-moon
     > .elementor-컨테이너:호버
     .product-image::이전 {
     애니메이션 이름:phasesMoonBackground;
     애니메이션 지속 시간: 0.3초;
     애니메이션 타이밍 기능: easy-in-out;
     애니메이션 지연: 0.3초;
     애니메이션 채우기 모드: 앞으로;
  }

  @keyframes 단계MoonBackground {
     100% { 배경 이미지: url("./images/phases-of-the-moon-bg.svg") }
  }

편집: 배경 이미지에 애니메이션을 적용할 수 없습니다. 대신 불투명도를 사용하세요

이미지가 그라데이션으로 페이드 인되지만 호버를 취소하면 페이드 아웃되는 대신 즉시 이미지 없음으로 전환됩니다.

.elementor-section.elementor-element.product-card
     >
     .product-image::이전 {
     전환: 모두 0.3초 Ease-in-out;
     위치: 절대;
     너비: 100%;
     높이: 100%;
     background-repeat: 반복하지 않음;
     배경 크기: 표지;
     상단: 0;
     왼쪽: 0;
     디스플레이: 블록;
     콘텐츠: "";
  }

  .elementor-section.elementor-element.core-range
     > .elementor-컨테이너:호버
     .product-image::이전 {
     애니메이션: productCardBackgroundHover 0.3초 완화;
     애니메이션 채우기 모드: 앞으로;
     배경 이미지: url("./images/core-range-bg.svg");
  }

  .elementor-section.elementor-element.phases-of-the-moon
     > .elementor-컨테이너:호버
     .product-image::이전 {
     애니메이션: productCardBackgroundHover 0.3초 완화;
     애니메이션 채우기 모드: 앞으로;
     배경 이미지: url("./images/phases-of-the-moon-bg.svg");
  }

  @keyframes productCardBackgroundHover {
     0% { 불투명도: 0 }
     100% { 불투명도: 1 }
  }

Answer 1

문제는 불투명도가 전환되지 않는다는 것입니다. 이는 마우스 오버 시 배경 이미지를 설정했기 때문입니다. 따라서 마우스 오버가 없으면 불투명도가 전환되고 이미지가 즉시 자연스럽게 사라집니다.

으아악