Wave
A CSS wave animation — sequential staggered translateY on a row of elements to create a flowing wave effect.
Quick implementation
.wave-container {
display: flex;
gap: 0.5rem;
}
.wave-dot {
width: 12px;
height: 12px;
background: var(--accent);
border-radius: 50%;
animation: wave 1.2s ease-in-out infinite;
}
/* Stagger delays */
.wave-dot:nth-child(1) { animation-delay: 0s; }
.wave-dot:nth-child(2) { animation-delay: 0.1s; }
.wave-dot:nth-child(3) { animation-delay: 0.2s; }
.wave-dot:nth-child(4) { animation-delay: 0.3s; }
.wave-dot:nth-child(5) { animation-delay: 0.4s; }
.wave-dot:nth-child(6) { animation-delay: 0.5s; }
.wave-dot:nth-child(7) { animation-delay: 0.6s; }
.wave-dot:nth-child(8) { animation-delay: 0.7s; }
@keyframes wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
@media (prefers-reduced-motion: reduce) {
.wave-dot {
animation: none;
transform: none;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
Act as a senior CSS developer. Create a "Wave" animation effect.
Requirements:
1. Use a container with 6-8 child elements (dots or bars).
2. Animate translateY up and back down.
3. Stagger the animation-delay by 0.1s for each child to create a wave ripple.
4. Use infinite looping.
5. Include a @media (prefers-reduced-motion: reduce) query to disable the animation for accessibility.
Provide two variants:
1. Vanilla CSS using nth-child selectors.
2. A Tailwind CSS utility class approach (using arbitrary values for delays if needed).Why this matters in 2026
Wave animations provide immediate visual feedback that a process is active without requiring heavy JavaScript logic. This pattern is essential for loading states, audio visualizers, and indicating system activity in a way that feels organic and fluid rather than mechanical.
The logic
The effect relies on a single keyframe definition that moves elements vertically, while the visual "wave" is generated entirely by the staggered animation-delay properties applied to each child element. By offsetting the start time of the same cycle, the browser renders a sequential motion that mimics a physical wave propagating across the row.
Accessibility & performance
Always include the prefers-reduced-motion media query to disable the animation for users who experience motion sickness or vestibular disorders. Since this animation only transforms the translateY property, it is GPU-accelerated and performs efficiently even on lower-end mobile devices without causing layout thrashing.