Transition Timing Function

Utilities for controlling the easing of CSS transitions.

Class CSS Output
ease-out
--tw-ease: var(--ease-out);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
ease-in
--tw-ease: var(--ease-in);
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
ease-in-out
--tw-ease: var(--ease-in-out);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
ease-[value]
transition-timing-function: [value]
}

ease-out

--tw-ease: var(--ease-out);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

ease-in

--tw-ease: var(--ease-in);
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

ease-in-out

--tw-ease: var(--ease-in-out);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

ease-[value]

transition-timing-function: [value]

Reference

CSS Properties

  • transition-timing-function