Contents
Quick reference
Class | Properties |
---|---|
.ease-linear | transition-timing-function: linear; |
.ease-in | transition-timing-function: cubic-bezier(0.4, 0, 1, 1); |
.ease-out | transition-timing-function: cubic-bezier(0, 0, 0.2, 1); |
.ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
Basic usage
Controlling the easing curve
Use the ease-{timing}
utilities to control an element’s easing curve.
Hover each button to see the expected behaviour
ease-in
ease-out
ease-in-out
<button class="ease-in duration-300 ...">Button A</button>
<button class="ease-out duration-300 ...">Button B</button>
<button class="ease-in-out duration-300 ...">Button C</button>
Edit this page on Github
Last updated on April 6, 2024