crossfade pulse alternate phase breathing attention text alternating headline emphasis before/after text comparison breathing status indicator pair hero text with shifting focus need two elements that pulse in alternation want breathing text effect between two lines need attention toggle between two concepts
Crossfade Pulse
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/crossfade-pulse.json Hello, World
This element animates in
Background
Customize
Quick Start
<span class="crossfade-pulse-a">Line A</span> <span class="crossfade-pulse-b">Line B</span>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 580 bytes · 37 lines
- Custom Properties
-
--crossfade-speed - Classes
-
.crossfade-pulse-a.crossfade-pulse-b
crossfade pulse alternate phase breathing attention text
Two opposite-phase @keyframes — when A is at full opacity, B is dimmed to 35%, and vice versa. Creates a subtle breathing alternation that draws the eye between two elements without being distracting.
Alternating headline
<h1 class="text-4xl font-bold">
<span class="crossfade-pulse-a text-white">Wird deine Website</span><br>
<span class="crossfade-pulse-b text-cyan-400">von KI verstanden?</span>
</h1>Status comparison
<div class="flex gap-8 text-lg">
<span class="crossfade-pulse-a text-red-400">Chaos</span>
<span class="crossfade-pulse-b text-emerald-400">Clarity</span>
</div>Slower, subtler variant
<p style="--crossfade-speed: 6s;">
<span class="crossfade-pulse-a">Build</span> ·
<span class="crossfade-pulse-b">Ship</span>
</p>