Elements logo

Transition timing function

Utilities for controlling the easing of CSS transitions

Class reference

ClassProperties
ease-DEFAULTtransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
ease-lineartransition-timing-function: linear
ease-intransition-timing-function: cubic-bezier(0.4, 0, 1, 1)
ease-outtransition-timing-function: cubic-bezier(0, 0, 0.2, 1)
ease-in-outtransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
ease-ease-in-sinetransition-timing-function: cubic-bezier(0.12, 0, 0.39, 0)
ease-ease-out-sinetransition-timing-function: cubic-bezier(0.61, 1, 0.88, 1)
ease-ease-in-out-sinetransition-timing-function: cubic-bezier(0.37, 0, 0.63, 1)
ease-ease-in-quadtransition-timing-function: cubic-bezier(0.5, 0, 0.75, 0)
ease-ease-out-quadtransition-timing-function: cubic-bezier(0.25, 1, 0.5, 1)
ease-ease-in-out-quadtransition-timing-function: cubic-bezier(0.76, 0, 0.24, 1)
ease-ease-in-cubictransition-timing-function: cubic-bezier(0.32, 0, 0.67, 0)
ease-ease-out-cubictransition-timing-function: cubic-bezier(0.33, 1, 0.68, 1)
ease-ease-in-out-cubictransition-timing-function: cubic-bezier(0.65, 0, 0.35, 1)
ease-ease-in-quinttransition-timing-function: cubic-bezier(0.64, 0, 0.78, 0)
ease-ease-out-quinttransition-timing-function: cubic-bezier(0.22, 1, 0.36, 1)
ease-ease-in-out-quinttransition-timing-function: cubic-bezier(0.83, 0, 0.17, 1)
ease-ease-in-expotransition-timing-function: cubic-bezier(0.7, 0, 0.84, 0)
ease-ease-out-expotransition-timing-function: cubic-bezier(0.16, 1, 0.3, 1)
ease-ease-in-out-expotransition-timing-function: cubic-bezier(0.87, 0, 0.13, 1)
ease-ease-in-circtransition-timing-function: cubic-bezier(0.55, 0, 1, 0.45)
ease-ease-out-circtransition-timing-function: cubic-bezier(0, 0.55, 0.45, 1)
ease-ease-in-out-circtransition-timing-function: cubic-bezier(0.85, 0, 0.15, 1)
ease-ease-in-backtransition-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56)
ease-ease-out-backtransition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)
ease-ease-in-out-backtransition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6)

Usage

Use the ease-{timing} utilities to control an element’s easing curve.

<button class="transition ease-in duration-700 ...">Hover me</button>
<button class="transition ease-out duration-700 ...">Hover me</button>
<button class="transition ease-in-out duration-700 ...">Hover me</button>

Responsive

To control an element’s transition-duration at a specific breakpoint, add a {screen}: prefix to any existing transition-duration utility. For example, use md:duration-500 to apply the duration-500 utility at only medium screen sizes and above.

For more information about Elements’ responsive design features, check out the Responsive Design documentation.