← All elements
<h2 class="wt"><span style="--i:0">W</span><span style="--i:1">A</span><span style="--i:2">V</span><span style="--i:3">E</span><span style="--i:4">S</span></h2>About this animation
Letters that bob up and down in a travelling wave, with each letter offset by a custom property delay.
How it works
Every letter is a span with an inline custom property --i for its position. They all use the same keyframe that lifts a letter by 0.4em and drops it back, and the delay is calculated as the position times 0.12 seconds, so the lift travels along the word like a wave.
Ways to customise it
- Change the text by adding or removing spans with new --i numbers.
- Edit the 0.12s step to make the wave tighter or longer.
- Change the colour #ea580c.
Good to know
Splitting words into spans can make screen readers read letter by letter in some cases, so add an aria-label on the heading. The motion stops for reduced motion users.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.