모션

시맨틱 역할(fast, press, panel)을 사용하세요 — CSS --refineui-motion-duration-fast, --refineui-motion-scale-press. 컴포넌트에 150ms나 일회성 커브를 쓰지 마세요. 컨트롤 hover와 focus는 이미 refineui.css가 담당합니다.

역할 (요약)

종류	예시
Duration	instant, fast, normal, medium, slow, overlay, panel
Easing	standard, emphasized, panel, content, easeOut
Scale	enter, press, hoverGrow
Distance	float (4px)

Duration

instant0ms

fast150ms

normal180ms

medium200ms

slow240ms

overlay280ms

panel320ms

accordionPanel380ms

accordionContent260ms

toastEnter280ms

toastLeave200ms

skeleton1500ms

spinner800ms

Easing

standardcubic-bezier(0.2, 0, 0, 1)

emphasizedcubic-bezier(0.16, 1, 0.3, 1)

panelcubic-bezier(0.32, 0.72, 0, 1)

contentcubic-bezier(0.4, 0, 0.2, 1)

linearlinear

easeOutease-out

easeInOutease-in-out

Scale and distance

enter0.96

press0.98

hoverGrow1.15

float4px

사용법

.control {
  transition: transform var(--refineui-motion-duration-fast)
    var(--refineui-motion-easing-standard);
}

.control[data-pressed] {
  transform: scale(var(--refineui-motion-scale-press));
}