Tailwind CSS Classes

« All Tailwind CSS classes

Tailwind CSS class .transition / .transition-*

<button class="transition-none duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">None</button>

<button class="transition-all duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">All</button>

<button class="transition duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">Default</button>

<button class="transition-colors duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">Colors</button>

<button class="transition-opacity duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">Opacity</button>

<button class="transition-shadow duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">Shadow</button>

<button class="transition-transform duration-500 transform px-6 py-2 m-4 inline
               bg-teal-400 hover:bg-indigo-400
               border-2 border-red-500 hover:border-yellow-500
               hover:text-white
               hover:opacity-50
               hover:shadow-md
               hover:scale-125">Transform</button>

Preview

Are you tired of writing HTML by hand?

CSS source

.transition-none { transition-property: none; }
.transition-all { transition-property: all; }
.transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; }
.transition-colors { transition-property: background-color, border-color, color, fill, stroke; }
.transition-opacity { transition-property: opacity; }
.transition-shadow { transition-property: box-shadow; }
.transition-transform { transition-property: transform; }

More Tailwind CSS classes in Animation category

.ease-linear / .ease-*
.duration-75
.duration-100
.duration-150
.duration-200
.duration-300
.duration-500
.duration-700
.duration-1000
.delay-75
.delay-100
.delay-150
.delay-200
.delay-300
.delay-500
.delay-700
.delay-1000
.transition / .transition-*
Shuffle Editor

An online editor for busy developers.

Shuffle Editor on Facebook Shuffle Editor on Twitter Shuffle Editor on Dribbble

Products

UI Components

Support

Company

© 2024 Shuffle. All rights reserved.