tokens/motion.css

:root{
--dur-instant:80ms; /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:400ms; /* @kind other */
--dur-slower:700ms; /* @kind other */
--ease-out:cubic-bezier(.2,.8,.2,1); /* @kind other */
--ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-in:cubic-bezier(.5,0,1,1); /* @kind other */
--ease-snap:cubic-bezier(.16,1,.3,1); /* @kind other */
--t-color:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
--t-control:var(--t-color),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out);
--t-panel:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-snap);
}
@media (prefers-reduced-motion:reduce){:root{
--dur-instant:0ms; /* @kind other */
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-slower:0ms; /* @kind other */
}}