Motion

Use semantic roles (fast, press, panel) — CSS --refineui-motion-duration-fast, --refineui-motion-scale-press. Do not write 150ms or a one-off curve in a component. refineui.css already covers control hover and focus.

Roles (summary)

Kind	Examples
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

Usage

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

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