한 줄 요약 - offset-path로 요소가 따라갈 곡선(길)을 한 번 정해 두면, offset-distance만 0%에서 100%로 바꿔 그 길 위로 요소를 움직일 수 있어요. 직선 이동의 한계를 CSS만으로 넘는 기능이에요.
이럴 때 필요해요
로켓이 곡선을 그리며 날아가거나, 아이콘이 호를 그리며 자리를 옮기는 모션은 직선 translate로는 만들기 어려워요. 예전엔 키프레임마다 translate x/y 값을 일일이 찍거나, JS로 매 프레임 곡선 좌표를 계산해야 했죠. offset-path는 '길'을 한 번 정의하고 그 길 위의 '거리(%)'만 다루게 해서, 좌표 계산을 브라우저에 맡겨요.
어떻게 동작하나
offset-path로 요소가 따라갈 경로를 정해요. SVG path 문법(path('...'))으로 곡선을 그리거나 원/선 같은 기본 도형도 쓸 수 있어요.
offset-distance(0% ~ 100%)로 그 길의 몇 퍼센트 지점에 요소를 놓을지 정해요. 이 한 값만 0에서 100으로 늘리면 요소가 길을 따라 끝까지 이동해요.
offset-rotate를 auto로 주면 요소가 진행 방향(길이 휘는 각도)을 보고 같이 회전해요. 로켓 코가 늘 앞을 향하게 되죠. 0deg면 방향과 상관없이 똑바로 떠 있어요.
핵심은 이거예요
경로는 딱 한 번 정의하고, 애니메이션은 offset-distance(0% - 100%) 하나만 움직이면 끝이에요. 곡선의 어느 지점이 화면 어디인지는 브라우저가 계산하니, 개발자는 x/y 좌표를 단 하나도 쓰지 않아요.
놓치기 쉬운 것
화면에 보이는 선(SVG path)과 offset-path의 좌표가 정확히 같아야 요소가 그 선 위를 지나요. 둘이 어긋나면 요소가 길 밖으로 새요.
모션이 핵심이라 prefers-reduced-motion(움직임 최소화 설정) 사용자에겐 자동 재생을 꺼 주는 배려가 필요해요.
이런 곳에 써요
온보딩/히어로 화면에서 아이콘이나 일러스트가 곡선을 그리며 등장하는 장식 모션
지도/대시보드에서 점이 경로를 따라 이동하는 진행 표시(배달 경로, 단계 진행 등)