Animations

Keyframes + .animate-*, .hover-* utilities and a skeleton loader. All honor prefers-reduced-motion.

Entrance (click card to replay)

<div class="animate-fade-in">Fade in</div>
<div class="animate-slide-up">Slide up</div>
<div class="animate-slide-up animate-delay-150">Slide up, delayed</div>

Loops

pulse bounce ping shake

<span class="animate-pulse">Pulse</span>
<span class="animate-bounce">Bounce</span>
<span class="animate-ping">Ping</span>
<span class="animate-shake">Shake</span>
<svg class="icon animate-spin">…</svg>

Stagger (delays)

01delay-0

02delay-150

03delay-300

04delay-500

<div class="animate-slide-up animate-delay-0">…</div>
<div class="animate-slide-up animate-delay-75">…</div>
<div class="animate-slide-up animate-delay-150">…</div>
<div class="animate-slide-up animate-delay-300">…</div>
<div class="animate-slide-up animate-delay-500">…</div>
<div class="animate-slide-up animate-delay-700">…</div>

Hover micro-interactions

<button class="btn hover-lift">Lift</button>
<button class="btn hover-grow">Grow</button>
<button class="btn hover-glow">Glow</button>

Skeleton loader

<div class="skeleton" style="height:1rem;width:80%">&nbsp;</div>

Reference

Class	Effect
`.animate-fade-in / -fade-out`	opacity transitions
`.animate-slide-up / -down / -left / -right`	0.75rem translate + fade
`.animate-scale-in / -scale-out`	scale 0.95 ↔ 1 + fade
`.animate-pulse`	opacity 1→.5→1, infinite
`.animate-ping`	scale(2) + fade, infinite
`.animate-bounce`	vertical bounce
`.animate-spin`	360° rotate, infinite
`.animate-shake`	horizontal shake, single-shot
`.animate-delay-{0,75,150,300,500,700}`	animation-delay
`.animate-once / -infinite`	iteration-count
`.hover-lift / -grow / -glow`	hover micro-interactions
`.skeleton`	shimmer loader background