Tailwind CSS Transition Property
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.
Tailwind css Transition
The transition utility in Tailwind CSS allows you to animate changes to CSS properties over a specified duration, making your web elements more interactive and dynamic. You can smoothly transition properties like opacity, transform, color, and many others, providing a better user experience.
<button
class="transition-none duration-500 ease-in-out bg-indigo-300 hover:bg-indigo-600 transform hover:-translate-y-1 hover:scale-110 hover:text-white rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
<button
class="transition duration-500 ease-in-out text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
<button
class="transition-opacity duration-500 ease-in-out bg-indigo-100 text-gray-900 hover:opacity-40 transform rounded-lg py-4 px-12 border border-indigo-900">
Hover me
</button>
<button
class="transition-colors duration-500 ease-in-out bg-indigo-300 hover:bg-indigo-600 transform hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600 hover:text-white">
Hover me
</button>Tailwind css Transition Duration
The transition-duration utility in Tailwind CSS allows you to control how long a CSS property transition should take when an element changes state.
Transition Duration Property classes:
- duration-75: This class is used to take the transition time of 75ms.
- duration-100: This class is used to take the transition time of 100ms.
- duration-150: This class is used to take the transition time of 150ms.
- duration-200: This class is used to take the transition time of 200ms.
- duration-300: This class is used to take the transition time of 300ms.
- duration-500: This class is used to take the transition time of 500ms.
- duration-700: This class is used to take the transition time of 700ms.
- duration-1000: This class is used to take the transition time of 1000ms.
<button
class="transition duration-100 ease-in-out text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
<button
class="transition duration-300 ease-in-out text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
<button
class="transition duration-500 ease-in-out text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
<button
class="transition duration-1000 ease-in-out text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Tailwind css Transition Timing Function
The transition-timing-function utility in Tailwind CSS allows you to control the speed curve of CSS transitions.
Transition Timing Function Property classes:
- ease-linear: In this, the animation has the same speed from start to end.
- ease-in: This is similar to easing where the end of the animation is fast.
- ease-out: This is similar to easing where the start of the animation is fast.
- ease-in-out: This sets the class to its default value.
<button
class="transition duration-500 ease-linear text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
<button
class="transition duration-500 ease-in text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
<button
class="transition duration-500 ease-out text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
<button
class="transition duration-500 ease-in-out text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>Tailwind css Transition Delay
The transition-delay utility in Tailwind CSS allows you to specify a delay before a transition starts after an element's state changes (e.g., on hover, focus, etc.).
Transition Delay Property classes:
- delay-75: This class is used to start the transition time of 75ms.
- delay-100: This class is used to start the transition time of 100ms.
- delay-150: This class is used to start the transition time of 150ms.
- delay-200: This class is used to start the transition time of 200ms.
- delay-300: This class is used to start the transition time of 300ms.
- delay-500: This class is used to start the transition time of 500ms.
- delay-700: This class is used to start the transition time of 700ms.
- delay-1000: This class is used to start the transition time of 1000ms.
<button
class="transition duration-500 delay-0 ease-in-out text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
<button
class="transition duration-500 delay-200 ease-in-out text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
<button
class="transition duration-500 delay-500 ease-in-out text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
<button
class="transition duration-500 delay-700 ease-in-out text-white bg-indigo-600 hover:bg-indigo-700 transform hover:-translate-y-1 hover:scale-110 rounded-lg py-4 px-12 border border-indigo-600">
Hover me
</button>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More