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
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart
ease-in-quint
ease-out-quint
ease-in-out-quint
ease-in-expo
ease-out-expo
ease-in-out-expo
ease-in-circ
ease-out-circ
ease-in-out-circ
ease-in-back
ease-out-back
ease-in-out-back
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.