MonorailCss

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

transition-timing-function MDN ↗

CSS Properties

  • transition-timing-function