0
0
Tailwindmarkup~5 mins

Animation delay in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Animation delay lets you wait before an animation starts. It helps make animations feel smooth and natural.

You want a button to change color after a short pause when hovered.
You want text to fade in one after another in a list.
You want to delay a loading spinner animation to avoid flicker.
You want to create a sequence of animations on a page.
You want to control when an animation begins for better user focus.
Syntax
Tailwind
delay-{time}

Replace {time} with the delay duration like 500 for 500ms or 1000 for 1s.

Tailwind uses fixed delay values like delay-500 for 500ms delay.

Examples
This element starts bouncing after half a second delay.
Tailwind
<div class="animate-bounce delay-500">Bounce after 0.5 seconds</div>
This element spins but waits 1 second before starting.
Tailwind
<div class="animate-spin delay-1000">Spin after 1 second</div>
This element pulses with a short delay before the animation begins.
Tailwind
<div class="animate-pulse delay-200">Pulse after 0.2 seconds</div>
Sample Program

This page shows two boxes. The blue box bounces after half a second delay. The green box spins after one second delay. Tailwind's built-in delay-* utilities are used.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Animation Delay Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center justify-center min-h-screen gap-6 bg-gray-50">
  <div class="animate-bounce delay-500 bg-blue-500 text-white px-6 py-3 rounded">
    Bounce after 0.5s delay
  </div>
  <div class="animate-spin delay-1000 bg-green-500 text-white px-6 py-3 rounded">
    Spin after 1s delay
  </div>
</body>
</html>
OutputSuccess
Important Notes

Tailwind CSS provides animation delay utilities like delay-500 for 500ms, delay-1000 for 1s, etc.

Use animation-delay in CSS to control when animations start.

Animation delay helps create smooth, staged animations that feel natural.

Summary

Animation delay waits before an animation starts.

Tailwind provides animation delay utilities like delay-500.

Use delay to make animations smoother and more natural.