모션

클래스

animation-과 transition- 접두사는 모두 duration과 easing 네임스페이스를 참조합니다. 사용자 지정 키는 두 네임스페이스에서 서로 달라야 하며 같은 키를 공유하면 모호해집니다. 반면 animate-는 전체 애니메이션 단축 속성을 참조합니다.

값

애니메이션 토큰 열 개는 키프레임 이름을 포함하고 무한 반복합니다. 지속 시간 일곱 개는 시간 길이를 제공하며 이징 곡선 아홉 개는 시간 진행을 값의 진행에 대응시킵니다. 시각적 비교는 한 번만 재생하고 처음에는 일시 정지하며 동작 줄이기 설정을 따릅니다.

애니메이션

지속 시간

이징

애니메이션의 일부 덮어쓰기

animate-pulse는 1s 지속 시간을 포함한 전체 animation 단축 속성을 설정합니다. 조건이 같으면 animation-slow가 단축 속성 뒤에 정렬되어 지속 시간을 300ms로 바꿉니다. 키프레임 이름과 반복 횟수는 유지되며 class 속성의 순서를 바꿔도 결과는 달라지지 않습니다.

두 경우 모두 같은 pulse 키프레임을 사용합니다. 막대는 애니메이션 진행도나 렌더링 속도가 아니라 반복 한 번의 지속 시간을 측정합니다. 프리셋은 반복하지만 이 비교에서는 반복 한 번만 따로 보여 줍니다.

텍스트 설명

1. animate-pulse 단축 속성은 pulse 1s infinite를 지정하며 반복 한 번의 지속 시간은 1초입니다.
2. 조건이 같으면 animation-slow가 animate-pulse 뒤에 정렬되어 지속 시간만 var(--duration-slow), 즉 300ms로 바꿉니다. pulse 키프레임과 무한 반복 횟수는 유지됩니다.
3. 두 가로 막대는 모두 0에서 시작하며 같은 밀리초 축에서 길이 비율은 1000:300입니다. 선언된 반복 한 번의 지속 시간을 측정하며 성능이나 도형의 이동 거리를 측정하지 않습니다.
4. 프리셋 pulse 토큰은 무한 반복합니다. 한 번만 실행하려면 네이티브 반복 횟수를 추가하거나 사용자 지정 토큰을 정의하세요. 클래스 이름 순서를 바꿔도 생성 규칙의 순서는 바뀌지 않습니다.

지속 시간 또는 이징 계열로 일부를 조정하거나 해당 변수로 사용자 지정 애니메이션 토큰을 구성하세요. (animation-duration:450ms) 같은 명시적 네이티브 선언으로 리터럴 값을 덮어쓸 수도 있습니다. 두 막대는 같은 시간 척도에서 한 번의 반복을 보여 주며 렌더링 성능을 비교하지 않습니다.

애니메이션 토큰은 값이 참조하는 키프레임을 유지합니다. 지속 시간이나 이징 클래스만으로는 애니메이션 이름을 지정하지 않습니다. 전환에도 속성 값의 변화가 필요합니다. transition-fast는 지속 시간을 제공할 뿐 hover 상태나 속성 목록을 제공하지 않습니다.

지연은 효과가 시작되는 시점을 바꾸며 지속 시간을 늘리지 않습니다. 이징은 지속 시간 안에서 진행 양상을 바꿉니다. 제어점이 세로 0–1 범위를 벗어나는 곡선은 끝점을 넘거나 뒤로 움직일 수 있지만, 애니메이션 대상 속성이 실제 렌더링 값을 제한할 수 있습니다.

필수적이지 않은 모션에는 @motion-safe를 사용하세요. 프리셋 애니메이션을 한 번만 실행하려면 같은 조건에서 (animation-iteration-count:1)을 추가하세요. 컴포넌트의 등장 애니메이션 구성은 테마 가이드에서, 캡처한 페이지 상태 사이의 전환은 뷰 전환 가이드에서 다룹니다.

관련 문서: 생성 규칙의 순서, 네이티브 animation 단축 속성, 뷰 전환.

사용 예

모션이 허용되면 링크에 마우스를 올렸을 때 배경 변화에 이징을 적용합니다. 링크는 값 표로 돌아갑니다.

<a href="#values" class="… (transition-property:background-color) transition-fast@motion-safe transition-smooth@motion-safe bg-surface-inset:hover">View motion values</a>

@layer theme {  :root,  :host {    --color-zinc-5: oklch(96.5% .0011 265);    --color-zinc-100: oklch(15% .0016 265)  }  :root,  :host {    --color-surface-inset: light-dark(var(--color-zinc-5), var(--color-zinc-100))  }  :root,  :host {    --duration-fast: .15s;    --easing-smooth: cubic-bezier(.4, 0, .2, 1)  }}@layer utilities {  .\(transition-property\:background-color\) {    transition-property: background-color  }  .bg-surface-inset\:hover:hover {    background-color: var(--color-surface-inset)  }  @media (prefers-reduced-motion: no-preference) {    .transition-fast\@motion-safe {      transition-duration: var(--duration-fast)    }  }  @media (prefers-reduced-motion: no-preference) {    .transition-smooth\@motion-safe {      transition-timing-function: var(--easing-smooth)    }  }}

사용자 정의

지속 시간과 이징 토큰으로 애니메이션을 구성하고 키프레임은 네이티브 CSS로 선언하세요. --animate-reveal를 정의하면 animate-reveal이 생성됩니다.

@theme {  --animate-reveal:    reveal var(--duration-slow) var(--easing-crisp) both;}@keyframes reveal {  from { opacity: 0; translate: 0 .5rem; }}

@keyframes reveal {  from {    opacity: 0;    translate: 0 .5rem;  }}@layer theme {  :root,  :host {    --duration-slow: .3s;    --easing-crisp: cubic-bezier(.16, 1, .3, 1)  }  :root,  :host {    --animate-reveal: reveal var(--duration-slow) var(--easing-crisp) both  }}@layer utilities {  @media (prefers-reduced-motion: no-preference) {    .animate-reveal\@motion-safe {      animation: var(--animate-reveal)    }  }}

관련 문서: 테마 지시문, 테마 토큰.