이 글은 CSS 캐러셀에서 스크롤 드리븐 애니메이션을 적용하는 방법을 다룹니다. 캐러셀의 각 아이템에 키프레임 애니메이션을 정의하고, animation-timeline: scroll(inline);을 사용해 스크롤될 때 애니메이션이 실행됩니다. 예시로, 아이템의 높이와 폰트 크기가 변화하는 애니메이션을 보여줍니다. 하지만 CSS 스크롤 스냅(snap)과 부드러운 스크롤 기능은 동시에 사용할 때 충돌이 발생해 제대로 적용되지 않습니다. 이 문제를 해결하려고 view() 타임라인도 시도했지만, 부드러운 스크롤과의 완벽한 조합에는 한계가 있었다고 설명합니다. 최신 CSS 기능을 실험하는 과정에 관한 글입니다.
3개의 좋아요