Contents
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
Controlling transitioned properties
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>
Edit this page on Github
Last updated on April 6, 2024