CSS 오프셋 경로 속성

정의와 사용법

offset-path 속성은 애니메이션 요소에 경로를 생성하는 데 사용됩니다.

애니메이션 <div>에 경로를 생성합니다:

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

값	설명
none	기본. 요소의 기본 offset-path 속성 값.
path()	SVG 문법을 사용하여 경로를 지정합니다. 참조:SVG 경로.
ray()	CSS ray() 함수를 사용하여 경로를 지정합니다.
url()	SVG 파일의 URL을 사용하여 경로를 지정합니다.
<basic-shape>	CSS 함수(예: inset()、circle()、ellipse() 또는 polygon())를 사용하여 기본 형상을 정의하여 경로를 지정합니다.
<coord-box>	좌표 상자를 사용하여 경로를 지정합니다.
initial	이 속성을 기본 값으로 설정합니다. 참조: initial.
inherit	부모 요소에서 이 속성을 상속받습니다. 참조: inherit.

기본값:	none
상속성:	아니요
애니메이션 제작:	지원. 참조:애니메이션 관련 속성.
버전:	CSS3
JavaScript 문법:	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

표格에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬	에지	파이어폭스	사파리	오페라
55	79	72	15.4	45