Durations

The Tailwind classes write the value of the token: duration-200 is 200ms, as --duration-200, without reading the variable (Tailwind reads --transition-duration-200, which styles does not publish). To follow the variable, should a theme change it, write duration-(--duration-200). --duration-75duration-7575ms

--duration-100duration-100100ms

--duration-150duration-150150ms

--duration-200duration-200200ms

--duration-300duration-300300ms

--duration-500duration-500500ms

--duration-700duration-700700ms

--duration-1000duration-10001000ms

Easings

Each curve is drawn from its control points, over a dot that it moves in --duration-1000; the back curves overshoot their ends. --ease-in-backease-in-backcubic-bezier(0.6, -0.28, 0.735, 0.045)

--ease-in-circease-in-circcubic-bezier(0.6, 0.04, 0.98, 0.335)

--ease-in-cubicease-in-cubiccubic-bezier(0.55, 0.055, 0.675, 0.19)

--ease-in-expoease-in-expocubic-bezier(0.95, 0.05, 0.795, 0.035)

--ease-in-out-backease-in-out-backcubic-bezier(0.68, -0.55, 0.265, 1.55)

--ease-in-out-circease-in-out-circcubic-bezier(0.785, 0.135, 0.15, 0.86)

--ease-in-out-cubicease-in-out-cubiccubic-bezier(0.645, 0.045, 0.355, 1)

--ease-in-out-expoease-in-out-expocubic-bezier(1, 0, 0, 1)

--ease-in-out-quadease-in-out-quadcubic-bezier(0.455, 0.03, 0.515, 0.955)

--ease-in-out-quartease-in-out-quartcubic-bezier(0.77, 0, 0.175, 1)

--ease-in-out-quintease-in-out-quintcubic-bezier(0.86, 0, 0.07, 1)

--ease-in-out-sineease-in-out-sinecubic-bezier(0.445, 0.05, 0.55, 0.95)

--ease-in-quadease-in-quadcubic-bezier(0.55, 0.085, 0.68, 0.53)

--ease-in-quartease-in-quartcubic-bezier(0.895, 0.03, 0.685, 0.22)

--ease-in-quintease-in-quintcubic-bezier(0.755, 0.05, 0.855, 0.06)

--ease-in-sineease-in-sinecubic-bezier(0.47, 0, 0.745, 0.715)

--ease-out-backease-out-backcubic-bezier(0.175, 0.885, 0.32, 1.275)

--ease-out-circease-out-circcubic-bezier(0.075, 0.82, 0.165, 1)

--ease-out-cubicease-out-cubiccubic-bezier(0.215, 0.61, 0.355, 1)

--ease-out-expoease-out-expocubic-bezier(0.19, 1, 0.22, 1)

--ease-out-quadease-out-quadcubic-bezier(0.25, 0.46, 0.45, 0.94)

--ease-out-quartease-out-quartcubic-bezier(0.165, 0.84, 0.44, 1)

--ease-out-quintease-out-quintcubic-bezier(0.23, 1, 0.32, 1)

--ease-out-sineease-out-sinecubic-bezier(0.39, 0.575, 0.565, 1)

Transitions

The properties Magma animates, in two lists: cosmetic for color, shadow and size changes, size for size changes only. The utilities transition-cosmetic and transition-size set them with the default duration and easing. --transition-property-cosmetictransition-cosmeticbackground-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width

--transition-property-sizetransition-sizeheight, margin, padding, width

Reduced motion

The motion preference is a class on <html>, pref-animation-reduce, written by mds-pref-animation or taken from the system: the components shorten or drop their animations under it. Do the same with your own transitions, rather than adding a media query of your own.