VOOZH about

URL: https://www.geeksforgeeks.org/css/tailwind-css-transition-duration/

⇱ Tailwind CSS Transition Duration - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Tailwind CSS Transition Duration

Last Updated : 23 Jul, 2025

This class accepts lots of value in 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:

Output:

Comment