Durate

Le classi di Tailwind scrivono il valore del token: duration-200 vale 200ms, come --duration-200, senza leggere la variabile (Tailwind legge --transition-duration-200, che styles non pubblica). Per seguire la variabile, se un tema la cambia, scrivi 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

Curve

Ogni curva è disegnata dai suoi punti di controllo, sopra un pallino che muove in --duration-1000; le curve back superano i loro estremi. --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)

Transizioni

Le proprietà che Magma anima, in due elenchi: cosmetic per i cambi di colore, ombra e dimensione, size solo per i cambi di dimensione. Le utility transition-cosmetic e transition-size li applicano con la durata e la curva predefinite. --transition-property-cosmetictransition-cosmeticbackground-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width

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

Meno movimento

La preferenza per il movimento è una classe su <html>, pref-animation-reduce, scritta da mds-pref-animation o presa dal sistema: sotto di essa i componenti accorciano o tolgono le loro animazioni. Fai lo stesso con le tue transizioni, invece di aggiungere una tua media query.