CSS 애니메이션은 사라지지 않습니다.
<p>마우스를 올리면 배경 이미지가 페이드 인 및 페이드 아웃되는 간단한 애니메이션 문제를 해결하려고 합니다. 키프레임을 정의했는데도 웹 브라우저에 정의되지 않았다고 표시됩니다. </p>
<pre class="brush:php;toolbar:false;">.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") }
}</pre>
<p><strong>편집: 배경 이미지에 애니메이션을 적용할 수 없습니다. 대신 불투명도를 사용하세요</strong></p>
<p>이미지가 그라데이션으로 페이드 인되지만 호버를 취소하면 페이드 아웃되는 대신 즉시 이미지 없음으로 전환됩니다. </p>
<pre class="brush:php;toolbar:false;">.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 }
}</pre>
<p><br /></p>
