-
Notifications
You must be signed in to change notification settings - Fork 0
Motion Path
박수정 edited this page Sep 5, 2024
·
5 revisions
CSS에서 요소가 지정된 경로를 따라 애니메이션되도록 하는 기능.
요소가 따라갈 경로를 정의
일러스트로 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");
요소가 경로 상에서 얼마나 이동했는지
0%부터 100%까지 값을 가지며 100%는 경로의 끝까지 이동한 상태
offset-distance: 500px;
요소가 경로를 따라 움직이면서 회전할지 여부를 설정
자동으로 회전하게 하거나, 특정 각도로 회전하게 할 수 있다
※ auto를 넣어줘야 자동으로 회전한다
offset-rotate: auto 90deg;