Enter animations in tw-animate-css
Enter animations play when an element appears. In tw-animate-css you add the animate-in base class and then pick one or more effects such as fade-in or zoom-in.
How it works
- Add the base class. The card has
animate-in. Without this base class the enter effects on the element do nothing. [1] - Combine fade and zoom.
fade-inandzoom-inare added next to the base class.duration-500sets the animation duration to 500ms. [1] - Replay with a key. The Replay button increases a counter that is used as the React
key. React mounts a new card each time, so the entrance plays again. [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';
export default function App() {
const [run, setRun] = useState(0);
return (
<div className='flex h-[380px] flex-col items-center justify-center gap-6 bg-slate-50'>
{/* A new key mounts a new card, so the enter animation plays again */}
<div
key={run}
className='animate-in fade-in zoom-in duration-500 w-72 rounded-xl bg-white p-6 shadow-lg'
>
<h2 className='text-lg font-semibold text-slate-800'>Welcome back</h2>
<p className='mt-2 text-sm text-slate-500'>
This card uses animate-in fade-in zoom-in duration-500.
</p>
</div>
<button
onClick={() => setRun(run + 1)}
className='rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500'
>
Replay
</button>
</div>
);
}
Click Replay to mount the card again and watch the entrance. Code written by AgentGid [1].
Click Replay to mount the card again and watch the entrance. 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 Staggered delays in tw-animate-css Looping 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.