728x90 반응형 crossfade애니메이션1 [CSS] Firefox에서도 문제없는 백그라운드 이미지 디졸브/크로스페이드 효과 CSS - Firefox background-image animation not smooth img 태그의 이미지는 CSS의 background-image 속성으로 나타낸 이미지처럼 원하는 비율이나 위치로 보여주기가 어렵다. 이 때문에 개인적으로 메인 비주얼로 크게 들어가는 이미지는 img태그보다는 background-image 사용을 선호한다. 최근에 퍼블리싱한 홈페이지 호환성을 체크하는데 파이어폭스에서만 메인 백그라운드이미지의 cross fade 효과가 안 먹는 것이 아닌가! 빈 div에 background-image를 지정하고, keyframes 애니메이션으로 background-image의 소스가 바뀌게 짠 코드였다. 이미지 전환은 되는데 부드럽게 페이드인&아웃이 되지않았다. 이는 내가 알아본 바로는 파이어폭스가 cross-fade 속성을 지원하지 않기 때문인 듯하다. 위의 캡쳐는 크롬 .. 2023. 8. 17. 이전 1 다음 728x90 반응형
