Staggered delays in tw-animate-css
The delay and duration classes control when an animation starts and how long it runs. Giving list items growing delays makes them appear one after another.
How it works
- Give each item a delay. Every item has its own class:
delay-0,delay-150,delay-300anddelay-450. The full class names are written in the array so Tailwind can find them. [1] - Set the duration.
duration-500makes each slide and fade last 500ms. The items useanimate-in fade-in slide-in-from-left-8. [1] - Fill mode while waiting.
fill-mode-bothsetsanimation-fill-modetoboth, so items that are still waiting show the animation's first frame. [1]
Run and edit it
It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.
import { useState } from 'react';
const items = [
{ text: 'New comment on your post', delay: 'delay-0' },
{ text: 'Build finished in 42s', delay: 'delay-150' },
{ text: 'Anna invited you to a team', delay: 'delay-300' },
{ text: 'Weekly report is ready', delay: 'delay-450' },
];
export default function App() {
const [run, setRun] = useState(0);
return (
<div className='flex h-[380px] flex-col items-center justify-center gap-4 bg-slate-50'>
<ul key={run} className='w-80 space-y-2'>
{items.map((item) => (
<li
key={item.text}
className={`animate-in fade-in slide-in-from-left-8 duration-500 fill-mode-both ${item.delay} rounded-lg bg-white px-4 py-3 text-sm text-slate-700 shadow`}
>
{item.text}
<span className='ml-2 font-mono text-xs text-slate-400'>{item.delay}</span>
</li>
))}
</ul>
<button
onClick={() => setRun(run + 1)}
className='rounded-md bg-indigo-600 px-4 py-2 text-sm text-white'
>
Replay
</button>
</div>
);
}
Press Replay to watch the four items enter one after another. Code written by AgentGid [1].
Press Replay to watch the four items enter one after another. Code written by AgentGid [1].Checked Oct 17, 2026: it starts without errors in Chromium with tw-animate-css 1.4.0, react 19.3.1, react-dom 19.3.1, tailwindcss 4.3.3. Needs WebGL.
More tw-animate-css examples
Exit animations with data-state in tw-animate-css Slide-in animations in tw-animate-css Looping animations in tw-animate-css Enter animations in tw-animate-css
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.