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