0
0
Tailwindmarkup~5 mins

Duration and timing curves in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Duration and timing curves control how long animations take and how they speed up or slow down. This makes animations feel smooth and natural.

When you want a button to fade in smoothly after a click.
When you want a menu to slide down with a gentle speed change.
When you want to make a loading spinner rotate at a steady pace.
When you want to highlight an element by changing its color gradually.
When you want to create a bouncing effect for an icon.
Syntax
Tailwind
transition
duration-[time]
ease-[function]

Use duration-[time] to set how long the animation lasts, like duration-500 for 500ms.

Use ease-[function] to control the speed curve, like ease-in-out for smooth start and end.

Examples
This makes the animation last 300 milliseconds and start slowly, then speed up.
Tailwind
transition duration-300 ease-in
This makes the animation last 700 milliseconds and start fast, then slow down.
Tailwind
transition duration-700 ease-out
This makes the animation last 500 milliseconds and smoothly speed up and slow down.
Tailwind
transition duration-500 ease-in-out
This makes the animation last 1 second and move at a constant speed.
Tailwind
transition duration-1000 linear
Sample Program

This page shows a blue button. When you hover over it, the background color changes smoothly over 700 milliseconds using an ease-in-out timing curve. This means the color change starts slow, speeds up in the middle, and slows down at the end, making the effect feel natural.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Duration and Timing Curves</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <button class="bg-blue-600 text-white px-6 py-3 rounded transition duration-700 ease-in-out hover:bg-blue-400">
    Hover me
  </button>
</body>
</html>
OutputSuccess
Important Notes

Use shorter durations for quick feedback and longer durations for noticeable effects.

Timing curves like ease-in, ease-out, and ease-in-out help make animations feel more natural than a constant speed.

Test animations on different devices to ensure they feel smooth everywhere.

Summary

Duration controls how long an animation takes.

Timing curves control the speed pattern of the animation.

Tailwind makes it easy to add these with simple classes like duration-500 and ease-in-out.