Animation Timing Function

April 20, 2025 ยท View on GitHub

ease-*

Class Styles

ease-linear

 
animation-timing-function: linear;

ease-in

 
animation-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */

ease-out

 
animation-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */

ease-in-out

 
animation-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */

ease-initial

 
animation-timing-function: initial;

ease-(<custom-property>)

 
animation-timing-function: var(<custom-property>);

ease-[<value>]

 
animation-timing-function: <value>;

Note

This utility is not defined in tw-animate-css and is included only for completeness. It uses the --tw-ease variable to apply the timing function. Check out the Tailwind CSS documentation to see the actual implementation.