Tailwind CSS Transition Property

Read

Discuss

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. The transition-property class is used to specify the name of the CSS property for which the transition effect will occur. In CSS, we have done that by using the CSS transition-property.

Transition Property classes:

transition-none: This value is used to specify that no class will get a transition effect.
transition-all: All the class will get a transition effect. This is also the default value for this class.
transition: We can specify the names of CSS properties for which transition effect will be applied. We can also specify multiple properties by separating them with a comma.
transition-colors: This value is used to specify that the color class will get a transition effect.
transition-opacity: This value is used to specify that the opacity class will get a transition effect.
transition-shadow: This value is used to specify that the shadow class will get a transition effect.
transition-transform: This value is used to specify that the transformation into a defined shape.

Syntax:

<element class="transition-{properties}">...</element>

Example:

HTML

<!DOCTYPE html>  
<html> 
<head>  
    <link href=  
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">  
</head>  
  
<body class="text-center mx-4 space-y-2">  
    <h1 class="text-green-600 text-5xl font-bold">  
        GeeksforGeeks  
    </h1>  
    <b>Tailwind CSS Transition Property Class</b>  
    <div class="bg-green-200 m-8 grid grid-flow-col gap-4 p-5">  
        <button class="transition duration-500 ease-in-out  
                       bg-green-300 hover:bg-green-600 transform  
                       hover:-translate-y-1 hover:scale-110  
                       rounded-lg p-4 border border-green-900"> 
            Hover me 
        </button> 
        <button class="transition-opacity duration-500 ease-in-out  
                       bg-green-300 hover:opacity-75 transform  
                       hover:-translate-y-1 hover:scale-110  
                       rounded-lg p-4 border border-green-900"> 
            Hover me 
        </button> 
        <button class="transition-none duration-500 ease-in-out  
                       bg-green-300 hover:bg-green-600 transform  
                       hover:-translate-y-1 hover:scale-110  
                       rounded-lg p-4 border border-green-900"> 
            Hover me 
        </button> 
        <button class="transition-colors duration-500 ease-in-out  
                       bg-green-300 hover:bg-yellow-600 transform  
                       hover:scale-110 rounded-lg p-4 border  
                       border-green-900 hover:border-black"> 
            Hover me 
        </button> 
    </div>  
</body>  
  
</html>  

Output:

different property class

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 23 Mar, 2022