← All elements
<header>
<div>
<h1>Purely CSS</h1>
<p>CSS Animation</p>
</div>
</header>About this animation
Seven coloured bars sweep in from alternating sides across a header, then the title and subtitle fade in on top.
How it works
Seven gradient bars are drawn as background layers on the header, each starting off screen on alternating sides. One keyframe slides them in with staggered percentages and fades them in, and later keyframes reveal the heading and subtitle on top. Custom properties hold the four colours.
Ways to customise it
- Change --bg, --c1, --c2 and --c3.
- Edit the keyframe percentages for a different order.
- Replace the title and subtitle text.
Good to know
The text has real heading markup and stays readable after the animation ends. A reduced-motion rule can show the final state at once.
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.