레퍼런스
토큰 레퍼런스
파서가 쓰는 토큰 데이터로 만든 전체 animate 토큰 목록이에요.
이 페이지는 tokens.json으로 만들어요. 파서, 에디터 확장, 이 사이트의 미리보기가 모두 같은 데이터를 써서, 배포된 버전과 항상 같아요.
문법
animate = group ("," group)*
group = token (" " token)*
token = preset | keyframe | exit | timing | spring | transition | layout
keyframe = ("from:" | "to:") utility
exit = "exit:" utility
utility = ["-"] name "-" number e.g. opacity-50, -translate-y-20
number = digits ["." digits] unsigned decimal- 공백은 한 그룹 안의 토큰을 나눠요. 순서는 상관없어요.
- 쉼표는 그룹을 나눠요. 그룹들은 각자의 타이밍으로 동시에 재생돼요.
- 그룹마다 프리셋은 하나까지 쓸 수 있어요.
transition-*는animate값 하나에 하나만 적용돼요. 여러 개면 마지막 것을 따라요.- 여러 그룹에
layout-*토큰이 있으면 가장 강한 것을 따라요(linear보다 spring).
프리셋
| 토큰 | 시작 값 | 도착 값 | 기본 모션 |
|---|---|---|---|
fade-in | opacity: 0 | opacity: 1 | 타이밍, 300ms |
fade-out | opacity: 1 | opacity: 0 | 타이밍, 250ms |
slide-up | translateY: 24 | translateY: 0 | 타이밍, 320ms |
slide-down | translateY: -24 | translateY: 0 | 타이밍, 320ms |
slide-left | translateX: 24 | translateX: 0 | 타이밍, 320ms |
slide-right | translateX: -24 | translateX: 0 | 타이밍, 320ms |
scale-up | scale: 0.92 | scale: 1 | 타이밍, 260ms |
scale-in | scale: 0.92 | scale: 1 | 타이밍, 260ms |
scale-down | scale: 1.08 | scale: 1 | 타이밍, 260ms |
scale-out | scale: 1 | scale: 0.92 | 타이밍, 220ms |
bounce | translateY: -16, scale: 0.96 | translateY: 0, scale: 1 | 스프링, damping 8, stiffness 180, mass 0.9 |
커스텀 프리셋: definePreset
키프레임 접두사
| 접두사 | 의미 |
|---|---|
from:* | 애니메이션을 시작하기 전 모습이에요. |
to:* | 애니메이션이 도착할 모습이에요. |
exit:* | 컴포넌트가 사라질 때 도착할 모습이에요. |
유틸리티
| 유틸리티 | 결과 | 음수 형태 | 비고 |
|---|---|---|---|
opacity-50 | opacity: 0.5 | — | 퍼센트, 0–100 사이 |
translate-x-20 | translateX: 20 | -translate-x-20 | 포인트 |
translate-y-20 | translateY: 20 | -translate-y-20 | 포인트 |
scale-x-95 | scaleX: 0.95 | — | 퍼센트 (100 = 1) |
scale-y-105 | scaleY: 1.05 | — | 퍼센트 (100 = 1) |
scale-90 | scale: 0.9 | — | 퍼센트 (100 = 1) |
rotate-45 | rotate: '45deg' | -rotate-45 | 도(degree) |
w-120 | width: 120 | — | 포인트 |
h-80 | height: 80 | — | 포인트 |
퇴장 애니메이션은 opacity, translateX, translateY, scale을 움직여요. 퇴장 애니메이션을 확인해 보세요.
타이밍
| 토큰 | 의미 |
|---|---|
duration-300 | 지속 시간(ms)이에요. 우선순위: 토큰이나 객체 → 프리셋 기본값 → Strx.Provider 지속 시간 → 300ms |
delay-100 | 애니메이션이 시작하기 전에 기다리는 시간(ms)이에요. |
damping-12 | 스프링 감쇠(damping)예요. 기본값은 10이에요. |
stiffness-180 | 스프링 강성(stiffness)이에요. 기본값은 100이에요. |
mass-1 | 스프링 질량(mass)이에요. 기본값은 1이에요. |
play-3 play-infinite | 전체 재생 횟수예요. 계속 반복하려면 play-infinite를 써요. |
repeat-3 repeat-infinite | play-*와 같아요. 호환성을 위해 남겨 뒀어요. (이전 방식) |
Easing과 스프링
| 토큰 | 곡선 |
|---|---|
linear | 일정한 속도로 움직여요. |
ease | 부드럽게 시작하고 부드럽게 멈춰요(smoothstep). |
ease-in | 천천히 시작해서 빨라져요(cubic). |
ease-out | 빠르게 시작해서 천천히 멈춰요(cubic). easing을 정하지 않으면 이 값을 써요. |
ease-in-out | 천천히 시작하고 천천히 멈춰요(cubic). |
spring | 숫자 값을 스프링으로 움직여요. |
스타일 트랜지션
| 토큰 | 애니메이션되는 스타일 |
|---|---|
transition | 지원하는 숫자, 색, transform 값 전부 |
transition-all | 지원하는 숫자, 색, transform 값 전부 |
transition-colors | backgroundColor, borderColor 같은 색 키 |
transition-opacity | opacity만 |
transition-transform | translateX, scale, rotate 같은 transform 값 |
transition-spacing | margin*, padding* 키 |
transition-layout | width, height, 최소/최대 크기, top/right/bottom/left |
레이아웃 트랜지션
| 토큰 | 동작 | 모션 |
|---|---|---|
layout-linear | 타이밍으로 움직여요. | 300ms, 또는 duration-* / Provider 지속 시간 |
layout-spring | 스프링으로 움직여요. | damping 15, stiffness 120, mass 1 |
layout-fade | 타이밍으로 움직이면서 뷰가 서서히 나타나요. | 300ms, 또는 duration-* / Provider 지속 시간 |
layout-spring-stiff | 더 단단한 스프링으로 움직여요. | damping 20, stiffness 180, mass 0.9 |
layout-spring-bouncy | 더 통통 튀는 스프링으로 움직여요. | damping 10, stiffness 105, mass 1 |