Firefox와 Internet Explorer에서 배경 이미지에 애니메이션을 적용하지 않는 이유는 무엇입니까?

Patricia Arquette
풀어 주다: 2024-11-06 17:26:03
원래의
925명이 탐색했습니다.

Why Don't Firefox and Internet Explorer Animate Background Images?

배경 이미지 애니메이션: 브라우저 간 호환성

웹 애니메이션에서는 전환이나 키프레임 중에 배경 이미지를 변경하는 것이 일반적입니다. 그러나 사용자들은 Firefox 또는 Internet Explorer에서 배경 이미지 애니메이션이 작동하지 않는다고 보고했습니다.

Firefox 및 Internet Explorer가 배경 이미지 애니메이션을 표시하지 못하는 이유

CSS 표준에 지정된 대로 background-image는 애니메이션 가능한 속성으로 간주되지 않습니다. Firefox와 Internet Explorer는 이 사양을 준수하므로 애니메이션이 누락됩니다.

Chrome의 동작

사양에도 불구하고 Chrome은 배경 이미지 애니메이션을 표시합니다. 이는 배경 이미지가 (불투명도 및 위치 내에서) 암시적으로 애니메이션 가능하다는 Chrome의 해석 때문입니다.

Firefox의 이상한 전환 처리

Firefox는 전환과 애니메이션 간에 일관되지 않게 동작합니다. . 전환 시 배경 이미지를 표시하는 동안 애니메이션을 완전히 건너뜁니다.

해결책: 대체 속성 사용

브라우저 간 호환성을 보장하려면 배경- 사용을 피하세요. 키프레임 내의 이미지. 대신 다음 인용문에서 제안한 대로 배경 위치 또는 불투명도를 사용하십시오.

"그라디언트를 애니메이션하려면 동일한 유형이어야 합니다."

코드 조각:

제공된 코드 조각에서 첫 번째 div는 배경 이미지 전환을 표시하고(모든 브라우저에서 작동) 두 번째 div는 배경 이미지에 애니메이션을 적용하려고 합니다(Firefox 또는 Internet Explorer에서는 작동하지 않음).

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿