This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. The transition-duration class is used to specify the length of time (in seconds or milliseconds) to complete the transition effect. In CSS, we have done that by using the CSS transition-duration.
Transition Duration 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.
Syntax:
<element class="duration-{amount}">...</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 Duration Class</b>
<div class="bg-green-200 m-8 grid grid-flow-col gap-4 p-5">
<button class="transition duration-75 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 duration-100 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 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 duration-1000 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>
</div>
</body>
</html>
|
Output:
transition duration class