Skip to content

Motion Path

박수정 edited this page Sep 5, 2024 · 5 revisions

Motion Path

CSS에서 요소가 지정된 경로를 따라 애니메이션되도록 하는 기능.

주요 속성

offset-path

요소가 따라갈 경로를 정의
일러스트로 svg 내보내기 하여 만들 수 있다.

offset-path: path( "m.5,443.85V52.36C.5,23.72,23.72.5,52.36.5s51.86,23.22,51.86,51.86v286.64c0,28.64,23.22,51.86,51.86,51.86s51.86-23.22,51.86-51.86V52.36c0-28.64,23.22-51.86,51.86-51.86s51.86,23.22,51.86,51.86v426.64c0,28.64,23.22,51.86,51.86,51.86s51.86-23.22,51.86-51.86V52.36c0-28.64,23.22-51.86,51.86-51.86s51.86,23.22,51.86,51.86v226.64c0,28.64,23.22,51.86,51.86,51.86s51.86-23.22,51.86-51.86v-59.96c0-28.64,23.22-51.86,51.86-51.86");

offset-distance

요소가 경로 상에서 얼마나 이동했는지
0%부터 100%까지 값을 가지며 100%는 경로의 끝까지 이동한 상태

offset-distance: 500px;

offset-rotate

요소가 경로를 따라 움직이면서 회전할지 여부를 설정
자동으로 회전하게 하거나, 특정 각도로 회전하게 할 수 있다
※ auto를 넣어줘야 자동으로 회전한다

offset-rotate: auto 90deg;
Clone this wiki locally