Heartbeat

Quick implementation

@keyframes heartbeat {
  0% { transform: scale(1); }
  15% { transform: scale(1.3); }
  30% { transform: scale(1); }
  45% { transform: scale(1.4); }
  60% { transform: scale(1); }
  100% { transform: scale(1); }
}

.heart-icon {
  animation: heartbeat 1.5s infinite;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Create a CSS heartbeat animation using @keyframes. The animation should use scale() to go from 1 to 1.3, back to 1, then to 1.4, and finally back to 1 to simulate a double-beat rhythm. The animation must loop infinitely and include a @media query for prefers-reduced-motion to disable the animation for users who prefer reduced motion.

Why this matters in 2026

Micro-interactions like the heartbeat are essential for conveying status without relying on color alone, which is crucial for accessibility and color-blind users. This specific rhythm mimics a biological heartbeat, making it an intuitive signal for alerts or active states.

The logic

The animation uses a non-linear timing curve implicitly by varying the scale values at specific keyframes, creating a "lub-dub" effect rather than a simple pulse. By returning to scale(1) between the two beats, we create a distinct pause that separates the two heartbeats.

Accessibility & performance

We ensure accessibility by respecting the prefers-reduced-motion media query, disabling the animation for users who find motion distracting. Performance is optimized by animating only the transform property, which is handled by the compositor and does not trigger layout recalculations.