CSS offset 속성 : 특정 경로(svg path)에 따라 이동하는 애니메이션 만들기

특정 경로 따라 이동하는 애니메이션

offset 주요 속성들

• offset-path
• offset-distance
• offset-rotate

아직 지원안됨

• offset-anchor
• offset-position

offset-path : 이동 경로 지정

/* 기본 */
offset-path: none;

/ * 함수 값 * /
offset-path: ray(45deg closest-side contain);

/* URL */
offset-path: url(#path);

/ * 모양 * /
offset-path: circle(50% at 25% 25%);
offset-path: inset(50% 50% 50% 50%);
offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');

/ * 기하학 상자 * /
offset-path: margin-box;
offset-path: stroke-box;

/ * 글로벌 값 * /
offset-path: inherit;
offset-path: initial;
offset-path: revert;
offset-path: unset;

	Desktop	Mobile
	Chrome	Edge	Firefox	인터넷 익스플로러	Opera	Safari	WebView 안드로이드	크롬 안드로이드	안드로이드 용 Firefox	오페라 안드로이드	IOS의 Safari	삼성 인터넷
offset-path	55 46	79	63-72	No	45 32	No	55 46	55 46	79	43 32	No	6.0path() 는 유일하게 지원되는 값 유형입니다.5.0

offset-distance : 위치 지정

/* 기본값 */
offset-distance: 0;

/ * 오프셋 경로의 중간 * /
offset-distance: 50%;

/ * 경로를 따라 위치한 고정 길이 * /
offset-distance: 40px;

/ * 글로벌 값 * /
offset-distance: inherit;
offset-distance: initial;
offset-distance: revert;
offset-distance: revert-layer;
offset-distance: unset;

Desktop	Mobile
	Chrome	Edge	Firefox	인터넷 익스플로러	Opera	Safari	WebView 안드로이드	크롬 안드로이드	안드로이드 용 Firefox	오페라 안드로이드	IOS의 Safari	삼성 인터넷
offset-distance	55 46	79	69-72	No	42 33	No	55 46	55 46	No	42 33	No	6.0 5.0

offset-rotate : 방향/회전 설정

/ * 선택적인 추가 각도로 경로 방향을 따르십시오 * /
offset-rotate: auto;
offset-rotate: auto 45deg;

/ * 경로 방향을 따르되`auto`의 반대 방향을 향함 * /
offset-rotate: reverse;

/ * 경로상의 위치에 관계없이 일정한 회전 유지 * /
offset-rotate: 90deg;
offset-rotate: .5turn;

/ * 글로벌 값 * /
offset-rotate: inherit;
offset-rotate: initial;
offset-rotate: revert;
offset-rotate: revert-layer;
offset-rotate: unset;

Desktop	Mobile
	Chrome	Edge	Firefox	인터넷 익스플로러	Opera	Safari	WebView 안드로이드	크롬 안드로이드	안드로이드 용 Firefox	오페라 안드로이드	IOS의 Safari	삼성 인터넷
offset-rotate	56 55 46	79	69-72	No	43 42 33	No	56 55 46	56 55 46	No	43 42 33	No	6.0 6.0 5.0

---

offset-anchor : 움직이는 요소의 내부 중심 지점 (ex: transform-origin)

/ * 키워드 값 * /
offset-anchor: top;
offset-anchor: bottom;
offset-anchor: left;
offset-anchor: right;
offset-anchor: center;
offset-anchor: auto;

/ * <백분율> 값 * /
offset-anchor: 25% 75%;

/ * <길이> 값 * /
offset-anchor: 0 0;
offset-anchor: 1cm 2cm;
offset-anchor: 10ch 8em;

/ * 가장자리 오프셋 값 * /
offset-anchor: bottom 10px right 20px;
offset-anchor: right 3em bottom 10px;

/ * 글로벌 값 * /
offset-anchor: inherit;
offset-anchor: initial;
offset-anchor: revert;
offset-anchor: unset;

offset-position : path 초기 위치

/ * 키워드 값 * /
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/ * <백분율> 값 * /
offset-position: 25% 75%;

/ * <길이> 값 * /
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/ * 가장자리 오프셋 값 * /
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

/ * 글로벌 값 * /
offset-position: inherit;
offset-position: initial;
offset-position: revert;
offset-position: revert-layer;
offset-position: unset;

---