Tailwind Transition Duration
In this article, we will discuss Tailwind transition duration and how you can use it to create stunning transitions on your website.
In Tailwind CSS, transition duration is a critical component of creating effective transitions.
Transition duration refers to how long it takes for a transition to be completed.
It works by specifying the duration of the transition animation in seconds or milliseconds.
It is an essential aspect of creating smooth and seamless transitions in web development.
Tailwind Transition Duration Classes
Tailwind CSS provides a range of pre-defined transition duration classes:
| Classes | Overview |
| duration-75 | This class is used to set the duration of a transition to 75ms. |
| duration-100 | This class is used to define the transition time as 100ms. |
| duration-150 | Using this class, the duration of a transition is set to 150ms. |
| duration-200 | In this case, the duration of a transition is specified as 200ms. |
| duration-300 | The transition period is defined as 300ms using this class. |
| duration-500 | This class ensures that the transition will last for 500ms. |
| duration-700 | Using this class, the transition span is set to 700ms. |
| duration-1000 | In this case, the duration of a transition is defined as 1000ms. |
Syntax
<element class="duration-500">...</element>
Below example showcases the implementation of some transition duration classes in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2 text-slate-900">Transition Delay Class in Tailwind CSS</p>
<p class="text-gray-500 font-semibold my-2">Hover on the buttons for demonstration</p>
<div class="bg-gray-200 w-full m-4 grid grid-flow-col gap-4 p-5 font-medium">
<button class="transition duration-75 ease-in-out text-slate-800
bg-amber-300 hover:bg-amber-400 hover:scale-110
rounded-lg px-3 py-2">
duration-75
</button>
<button class="transition duration-150 ease-in-out text-amber-200
bg-slate-600 hover:bg-slate-700 hover:scale-110
rounded-lg px-3 py-2">
duration-150
</button>
<button class="transition duration-300 ease-in-out text-slate-800
bg-fuchsia-400 hover:bg-fuchsia-500 hover:scale-110
rounded-lg px-3 py-2">
duration-300
</button>
<button class="transition duration-700 ease-in-out
bg-orange-400 hover:bg-orange-500 hover:scale-110
rounded-lg px-3 py-2">
duration-700
</button>
</div>
</body>
</html>
The following example covers the remaining transition duration classes in Tailwind that were not covered in the earlier example:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2 text-slate-900">Transition Delay Class in Tailwind CSS</p>
<p class="text-gray-500 font-semibold my-2">Hover on the buttons for demonstration</p>
<div class="bg-gray-200 w-full m-4 grid grid-flow-col gap-4 p-5 font-medium">
<button class="transition duration-100 ease-in-out text-slate-800
bg-amber-300 hover:bg-amber-400 hover:scale-110
rounded-lg px-3 py-2">
duration-100
</button>
<button class="transition duration-200 ease-in-out text-amber-200
bg-slate-600 hover:bg-slate-700 hover:scale-110
rounded-lg px-3 py-2">
duration-200
</button>
<button class="transition duration-500 ease-in-out text-slate-800
bg-fuchsia-400 hover:bg-fuchsia-500 hover:scale-110
rounded-lg px-3 py-2">
duration-500
</button>
<button class="transition duration-1000 ease-in-out
bg-orange-400 hover:bg-orange-500 hover:scale-110
rounded-lg px-3 py-2">
duration-1000
</button>
</div>
</body>
</html>
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
