Firefox 및 Internet Explorer에서 배경 이미지에 애니메이션을 적용할 수 없는 이유는 무엇입니까?

키프레임의 배경 이미지: Firefox 및 Internet Explorer에서는 효과가 없습니다.

보고된 바와 같이 이 문제는 파이어폭스와 인터넷 익스플로러. 이러한 불일치는 CSS 사양에 따라 background-image가 애니메이션 가능한 속성이 아니라는 사실에서 발생합니다. 그럼에도 불구하고 다양한 브라우저는 이러한 불일치를 다양한 방식으로 처리합니다.

Chrome(Webkit)은 애니메이션 중에 배경 이미지를 표시하는 반면 Firefox와 IE는 이를 자제합니다. oli.jp의 소스는 이러한 불일치가 CSS의 크로스페이딩 이미지에 대한 광범위한 지원 부족에서 비롯될 수 있다고 설명합니다. 그동안 이미지 스프라이트, 배경 위치 또는 불투명도를 사용하여 이 효과를 시뮬레이션할 수 있습니다.

역설적이게도 Firefox의 동작은 배경 이미지와 관련된 전환과 애니메이션 간에 다릅니다. 전환 중에 두 번째 이미지를 즉시 표시하지만(코드 조각에서 첫 번째 div 위로 마우스를 가져가면 표시됨), 애니메이션 중에는 표시되지 않습니다(두 번째 div 위로 마우스를 가져가면 알 수 있음).

결론 , 키프레임 내에 배경 이미지를 설정하지 않는 것이 좋습니다. 대신 oli.jp에서 ​​제안한 대로 배경 위치나 불투명도를 선택하세요.

위 내용은 Firefox 및 Internet Explorer에서 배경 이미지에 애니메이션을 적용할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!