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: