Quick reference

Class	Properties
`.transition-none`	transition-property: none;
`.transition-all`	transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
`.transition`	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
`.transition-colors`	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
`.transition-opacity`	transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
`.transition-shadow`	transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
`.transition-transform`	transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;;

Basic usage

Use the transition-{properties} utilities to specify which properties should transition when they change.

Hover each button to see the expected behaviour

<button class="transition ease-in-out delay-150 -translate-y-px-hover duration-300 scale-110-hover">Save changes</button>

Last updated on April 6, 2024