Motion

Easing curvesLink to this section

Curves from the easings token collection. Each is a --ease-* variable on :root and an ease-* utility for transition-timing-function; animate-ease-* sets animation-timing-function with the same names.

Token	CSS variable	Class	Value
easeInSine	--ease-in-sine	ease-in-sine	cubic-bezier(0.12, 0, 0.39, 0)
easeOutSine	--ease-out-sine	ease-out-sine	cubic-bezier(0.61, 1, 0.88, 1)
easeInOutSine	--ease-in-out-sine	ease-in-out-sine	cubic-bezier(0.37, 0, 0.63, 1)
easeInQuad	--ease-in-quad	ease-in-quad	cubic-bezier(0.11, 0, 0.5, 0)
easeOutQuad	--ease-out-quad	ease-out-quad	cubic-bezier(0.5, 1, 0.89, 1)
easeInCubic	--ease-in-cubic	ease-in-cubic	cubic-bezier(0.32, 0, 0.67, 0)
easeOutCubic	--ease-out-cubic	ease-out-cubic	cubic-bezier(0.33, 1, 0.68, 1)
easeInOutCubic	--ease-in-out-cubic	ease-in-out-cubic	cubic-bezier(0.65, 0, 0.35, 1)
easeInQuart	--ease-in-quart	ease-in-quart	cubic-bezier(0.5, 0, 0.75, 0)
easeOutQuart	--ease-out-quart	ease-out-quart	cubic-bezier(0.25, 1, 0.5, 1)
easeInOutQuart	--ease-in-out-quart	ease-in-out-quart	cubic-bezier(0.76, 0, 0.24, 1)
easeInQuint	--ease-in-quint	ease-in-quint	cubic-bezier(0.64, 0, 0.78, 0)
easeOutQuint	--ease-out-quint	ease-out-quint	cubic-bezier(0.22, 1, 0.36, 1)
easeInOutQuint	--ease-in-out-quint	ease-in-out-quint	cubic-bezier(0.83, 0, 0.17, 1)
easeInExpo	--ease-in-expo	ease-in-expo	cubic-bezier(0.7, 0, 0.84, 0)
easeOutExpo	--ease-out-expo	ease-out-expo	cubic-bezier(0.16, 1, 0.3, 1)
easeInOutExpo	--ease-in-out-expo	ease-in-out-expo	cubic-bezier(0.87, 0, 0.13, 1)
easeInCirc	--ease-in-circ	ease-in-circ	cubic-bezier(0.55, 0, 1, 0.45)
easeOutCirc	--ease-out-circ	ease-out-circ	cubic-bezier(0, 0.55, 0.45, 1)
easeInOutCirc	--ease-in-out-circ	ease-in-out-circ	cubic-bezier(0.85, 0, 0.15, 1)
easeInBack	--ease-in-back	ease-in-back	cubic-bezier(0.36, 0, 0.66, -0.56)
easeOutBack	--ease-out-back	ease-out-back	cubic-bezier(0.34, 1.56, 0.64, 1)
easeInOutBack	--ease-in-out-back	ease-in-out-back	cubic-bezier(0.68, -0.6, 0.32, 1.6)

Built-in curvesLink to this section

Curves Systhema adds from easings.net when the token collection does not declare them.

CSS variable	Class	Value
--ease-in-out-quad	ease-in-out-quad	cubic-bezier(0.45, 0, 0.55, 1)