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

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

웹 애니메이션에서는 전환이나 키프레임 중에 배경 이미지를 변경하는 것이 일반적입니다. 그러나 사용자들은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!