Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Transition Duration

  • Last Updated : 08 Mar, 2021

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :