Animate

Put animate= on any element for CSS keyframe animations — no classes, no JS. Layer animate-delay= for stagger effects and control duration with animate-duration=. All animations respect prefers-reduced-motion.

Basic animations

<span animate="spin">⚙️</span>
<div animate="pulse">…</div>
<div animate="bounce">…</div>
<div animate="float">…</div>
<div animate="heartbeat">❤️</div>
<div animate="wiggle">👋</div>

<!-- Notification dot with ping pulse -->
<span animate="ping" style="color:#ef4444;width:12px;height:12px;background:currentColor;border-radius:50%;display:inline-block;"></span>

Stagger with animate-delay=

<div animate="float" animate-delay="0">1</div>
<div animate="float" animate-delay="150">2</div>
<div animate="float" animate-delay="300">3</div>
<div animate="float" animate-delay="450">4</div>
<div animate="float" animate-delay="600">5</div>

Duration & control

<!-- Duration -->
<div animate="spin" animate-duration="500">fast</div>
<div animate="spin" animate-duration="3000">slow</div>

<!-- Run once -->
<div animate="tada" animate-once>tada on load</div>

<!-- Pause on hover -->
<div animate="spin" animate-pause>hover to pause</div>

<!-- Fill mode -->
<div animate="bounce" animate-fill="both">fill both</div>

All values

animate="spin|spin-slow|spin-fast|spin-reverse"
animate="pulse|pulse-fast"
animate="bounce|bounce-slow"
animate="shake|shake-loop"
animate="wiggle|float|float-slow"
animate="blink|tada|heartbeat|flash|rubber|drift|ping"

animate-delay="0|75|100|150|200|300|500|700|1000"
animate-duration="75|100|150|200|300|500|700|1000|2000"
animate-once  animate-twice
animate-fill="both|forwards"
animate-pause  (pauses on hover)