Tailwind CSS - Transition Property

Previous
Quiz
Next

Tailwind CSS Transition Property is a utility class that allows us to apply transitions to CSS properties.

Tailwind CSS Transition Property Classes

The following is the list of Tailwind CSS Transition Property Classes that are used to apply smooth transitions.

Class CSS 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;

Functionality of Tailwind CSS Transition Property Classes

  • transition-none: This class is used to remove the transition from properties.
  • transition-all: This class is used to apply transition to all properties.
  • transition: This class is a shorthand property to apply transition for multiple properties.
  • transition-colors: This class is used to apply a color-related transition.
  • transition-opacity: This class is used for an opacity-related transition.
  • transition-shadow: This class is used to apply a shadow-related transition.
  • transition-transform: This class is used to apply a transform-related transition.

Tailwind CSS Transition Property Example

The following example will illustrate the different transitional effects of various transition classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-green-100">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Transition Property Classes 
    </h2>
    <div class="grid grid-cols-2 gap-2">
        <div>
            <button class="bg-green-500 rounded-3xl p-3 transition-transform 
                            hover:scale-90 hover:text-white hover:font-medium">
                Hover: Transition-transform
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-3 transition-colors 
                            hover:text-white hover:font-medium hover:bg-green-700">
                Hover: Transition-color
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-3 transition
                            hover:opacity-30 hover:text-white
                            hover:font-medium">
                Hover: Transition-opacity
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-3 transition-shadow
                            hover:shadow-2xl shadow-green-950/40
                            hover:text-white hover:font-medium">
                Hover: Transition-shadow
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-3 transition-none
                            hover:text-white hover:font-medium">
                Hover: Transition-none
            </button>
        </div>
    </div>
</body>
</html>
Print Page
Previous
Next