16 CSS Pulse Animations

A CSS pulse animation is a repeating outward-radiating visual effect — a ring, halo, or scale-fade — used to draw attention to interactive elements without displacing them. The canonical recipe uses only three GPU-compositor-safe properties: transform, opacity, and box-shadow. For a rectangular button, use box-shadow outward-cast: animation: pulse 1.8s infinite; @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(brand, .5); } 70%, 100% { box-shadow: 0 0 0 18px rgba(brand, 0); } }. The 0 0 0 Npx spread grows outward while alpha fades to 0. box-shadow is chosen over outline or scaled pseudo-elements because it preserves the button's border-radius perfectly at every frame — a scaled pseudo-element distorts corners on non-square buttons. For a CIRCULAR element (FAB, dot, play button), use transform: scale on a pseudo-element instead: ::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: ripple 1.8s infinite; } @keyframes ripple { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }. The scale is clean on circles because the shape doesn't distort. Both patterns keep the animation compositor-only (no layout, no paint) — the browser can push these frames to the GPU without triggering reflow. This is the difference between smooth 60fps on mid-tier mobile and jerky 15fps on old Android. Every demo in this collection uses one of these two patterns.

Animating width, height, margin, or padding forces the browser to run a full layout + paint + composite pipeline on every animation frame — 60 times per second. The layout stage is expensive because ANY size change on ANY element potentially forces the browser to reflow its siblings, its parent, and every descendant. Paint then rebuilds the pixel buffer for every affected region. Composite finally uploads the new pixels to the GPU. On mid-tier mobile (mid-2020s Android, entry iPhones), this pipeline can take 10-16ms per frame — right at the edge of the 16.67ms budget for 60fps. Add one animated pulse ring using width: 20px → 60px and you're at 22ms per frame → 45fps. Add three concurrent pulses → 33ms → 30fps → visible stutter. Now measure your INP (Interaction to Next Paint) — it will hit 200ms+ on real hardware, and Google flags this as "Poor" in Core Web Vitals. Your Search Console will show the regression within days. The compositor-only alternative: transform and opacity skip layout and paint entirely — they run on the GPU compositor thread. box-shadow is technically a paint operation but modern browsers (Chrome 90+, Safari 15+, Firefox 89+) push it to the compositor for animation. So a 30-instance pulse using transform: scale or box-shadow spread runs at consistent 60fps even on 3-year-old Android hardware — because the CPU-side layout thread is never touched. This is not premature optimization; it's the difference between shipping and being penalized in Search Console.

For hover-triggered pulses (Add-to-Cart micro-interactions, Product hotspots, tooltip anchors), use animation-play-state: define the animation on the pseudo-element in the RESTING state with animation-play-state: paused, then flip it to running inside the :hover pseudo-class. Example: .btn::after { animation: pulse .8s ease-out 2; animation-play-state: paused; } .btn:hover::after { animation-play-state: running; }. Critically, the animation is DECLARED in the base rule so :hover only flips the play state. If you write animation INSIDE :hover, the animation restarts from 0% on every hover-in and reset feels janky. The animation-iteration-count: 2 gives you a bounded double-pulse (a burst that confirms readiness and then goes quiet); infinite hover pulse is disorienting and reads as "the button is broken." For touch devices where :hover isn't reliable, wrap the trigger in @media (hover: hover) so touch users get the button without the pulse trigger. For click-triggered one-shot pulses (submit confirmation, item added animation), use :active instead of :hover, and switch to animation-iteration-count: 1 so it fires exactly once per click. For focus-triggered pulses (keyboard accessibility), use :focus-visible instead of :focus — the -visible variant fires only for keyboard focus, not mouse-click focus, so mouse users don't see a distracting pulse on every button click. Demo 04 (Add to Cart Hover Pulse) ships the canonical hover-triggered double-pulse pattern with the @media (hover: hover) guard for touch devices.

The rule differs by intent tier. For decorative pulses (CTA buttons, FAB ripples, video play halos, ambient background glows), prefers-reduced-motion: reduce should DISABLE the pulse entirely — @media (prefers-reduced-motion: reduce) { .pulse-el::after { animation: none !important; } }. The element stays functional and clickable; the decorative pulse just doesn't animate. For informational pulses that carry meaning (Live status dot, Recording indicator, ECG heartbeat), the pulse cannot fully disappear because it conveys "this is active" or "recording is in progress" — critical information. The fallback here is to keep a STATIC saturated color state that clearly reads as "active" without animation. Example: a Live status dot animates a green pulse ring in normal motion, but in reduced-motion it shows a solid green dot with no ring — the user still sees "this is live," they just don't see it pulsing. This tiered approach follows WCAG 2.3.3 (Animation from Interactions) and respects WCAG 2.2.2 (Pause, Stop, Hide). WCAG 2.2.2 specifically says: any animation over 5 seconds must have a pause control; under 5 seconds is fine without controls. All 16 demos in this collection cycle under 3 seconds, so no pause controls needed — but reduced-motion must still be respected for users with vestibular disorders. Every demo in this collection ships the reduced-motion guard already.

Both are compositor-safe, but they solve different shape problems. box-shadow is best for non-circular elements — buttons with rounded rectangles, chips, cards. The shadow spread grows outward from the element's border-radius, perfectly matching its shape at every frame. A rounded-rectangle button gets a rounded-rectangle pulse; a squircle badge gets a squircle pulse. Transform: scale on a pseudo-element is best for circular or square elements — FABs, dots, play buttons, badges. Scaling a circular ::after preserves the circle perfectly. But scaling a rounded-rectangle pseudo-element distorts the corners nonlinearly (the border-radius scales along with everything else, so what was a subtle 10px radius becomes an oversized 22px radius at scale(2.2) — the corners visibly bulge outward). Trade-off summary: box-shadow = shape-safe on ANY element, single ring per animation (needs multiple pseudo-elements for multi-ring). Transform: scale = shape-safe only on circles/squares, works cleanly with dual pseudo-elements for continuous concentric waves. Demos 01, 04 use box-shadow (rectangular buttons); Demos 02, 03 use transform: scale (circular FAB, play button). For a rectangular button with a multi-ring cascade, combine both: box-shadow on the button itself for the outermost ring, transform: scale on staggered pseudo-elements INSIDE the button for inner rings. Rare pattern, useful for dramatic hero CTAs.

Every pulse animation gets its own GPU compositor layer, so 30 concurrent pulses use ~30 layers. Modern browsers cap active compositor layers around 50-100 before performance degrades. Practical rules: (1) Use will-change: transform on the animated element — tells the browser to promote to a compositor layer immediately, avoiding a promotion delay on animation start. But use SPARINGLY: will-change on every pulse permanently reserves GPU memory. Apply only to elements that are ACTIVELY animating and remove after. (2) Avoid pulsing more than 10-15 elements simultaneously on one page. If your page has 50 product cards each with an Add-to-Cart pulse, only the currently-hovered card's pulse should be running — use the hover-triggered pattern (Demo 04) so 49 pulses are paused at any given moment. (3) For always-on pulses (Live status dots, Recording indicators), reserve them for elements above-the-fold or currently visible. Use IntersectionObserver to pause pulses on elements scrolled out of view: const io = new IntersectionObserver(entries => entries.forEach(e => e.target.style.animationPlayState = e.isIntersecting ? 'running' : 'paused')); io.observe(dot);. This trims a 50-dot ops dashboard down to 8-12 actively animating dots at any moment. (4) On mobile, respect the battery-saver signal: navigator.connection.saveData or matchMedia('(prefers-reduced-data: reduce)') — if either is true, disable all decorative pulses (same as reduced-motion). This is not documented behavior yet, but Chrome ships the signal and battery-conscious users appreciate it.

The 16 patterns in this collection cover the production canon, organized by user intent tier. Attention / CTA (5 patterns): (1) Pulse Button CTA — landing-page "Book a call" / "Get started" buttons where the pulse indicates the primary conversion action. (2) FAB Pulse — mobile app bottom-right create/chat FAB, the always-visible primary action hub. (3) Video Play Overlay — landing-page hero video with an amber play button pulse tempting the click. (4) Add-to-Cart Hover Pulse — e-commerce product cards where the hover-triggered double-pulse confirms interactive readiness. (5) Notification Bell Badge — app header bell with a snappy pulse when the unread count changes. Live / Status indicators (5 patterns): (6) Live Status Dot — chat / streaming / server "online" indicator, tiny green dot with radiating soft ring. (7) ECG Heartbeat Line — medical monitor waveform for telehealth and fitness dashboards. (8) Server Status Ring — DevOps ops center (Datadog / PagerDuty pattern) with 3-ring concentric SLA health indicator. (9) Recording Indicator — red camera dot for video/audio capture UIs (Loom / Zoom / Riverside). (10) Map Pin Drop Pulse — delivery / rideshare apps with a geo-tracking marker. Async / Feedback (3 patterns): (11) Skeleton Loader Card Pulse — content-loading placeholder shimmer (LinkedIn / Facebook feed pattern). (12) Form Submitting Pulse — button state pulse while API request is in flight. (13) Load More Staggered Dots — infinite-scroll feed pagination indicator. Specialty / Aesthetic (3 patterns): (14) Pulsing Heart Icon — wishlist / social liking with cardiac-rhythm keyframes (0% → 20% scale-up → 40% pull-back → 100% return). (15) Voice Search Mic Pulse — voice UI listening state (Google Assistant / Alexa modal). (16) Icon Scan Overlay — security scanning HUD (Malwarebytes / Kaspersky pattern) with rapid concentric outward rings. Every pattern is copy-paste ready with industry-appropriate palette and typography — drop into your fintech / e-commerce / medical / DevOps / consumer app without stripping generic styling.