Tailwind CSS easing classes
A set of easing functions ready to copy and paste into your Tailwind CSS project.
ms
linear
ease
ease-in
ease-out
ease-in-out
easeInSine
easeOutSine
easeInOutSine
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack
Note
We use class names with arbitrary properties like [transition-timing-function:cubic-bezier(...)] instead of ease-[cubic-bezier(...)] as recommended in the Tailwind CSS documentation, because the latter won't work with the tailwindcss-animate plugin. See this GitHub issue for technical details.
Brought to you by
