CSS 오프셋 속성

정의 및 사용법

offset 요소를 경로에 따라 애니메이션하는 속성으로 사용되며, 다음 속성의 약자 형식입니다:

설정에 관하여 offset 속성 값의 다른 방법에 대한 더 많은 예시를 참조하세요.

사용 offset <img> 요소에 offset-path, offset-distance 및 offset-rotate 속성 값을 설정하는 간단한 속성:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

<img> 요소를 사용하여 offset offset-path 및 offset-rotate 속성 값 설정:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}

<img> 요소를 사용하여 offset offset-path 및 offset-distance 속성 값 설정:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}

<img> 요소를 사용하여 offset offset-path, offset-distance, offset-rotate, offset-anchor 속성 값을 설정하는 속성 설정:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}

offset: auto|value|initial|inherit;

값	설명
auto	기본. 각각의 'offset-' 속성의 기본값을 참고하세요.
offset-anchor	요소가 애니메이션 경로에 고정된 점을 지정합니다. 기본값은 auto입니다.
offset-distance	offset-path에서 정의된 경로의 시작점에서의 거리를 지정합니다. 기본값은 0입니다.
offset-path	요소가 애니메이션화될 경로를 지정합니다. 기본값은 none입니다.
offset-position	요소가 경로에 따라의 초기 위치를 지정합니다. 기본값은 normal입니다.
offset-rotate	요소가 경로에 따라 애니메이션화될 때의 회전 각도를 지정합니다. 기본값은 auto입니다.
initial	이 속성을 기본값으로 설정합니다. 참고: initial.
inherit	부모 요소에서 이 속성을 상속합니다. 참고: inherit.

기본값:	각각의 속성의 기본값을 참고하세요
상속성:	아니요
애니메이션 제작:	지원. 참고:애니메이션 관련 속성.
버전:	CSS3
JavaScript 문법:	object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"

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

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