<div class="pc-rotator" role="region" aria-label="Store announcements">
<p class="pc-rotator__slide" style="--i:0">Free shipping over ₱2,500</p>
<p class="pc-rotator__slide" style="--i:1">New autumn linen is in</p>
<p class="pc-rotator__slide" style="--i:2">Gift wrapping is on us</p>
</div>About this carousel
An announcement banner that cycles through three messages on its own with staggered keyframe fades, and pauses while hovered.
How it works
Three banner messages are stacked in the same spot with position: absolute. They share one 12 second keyframe animation that fades each one in and out, and a per-slide delay of four seconds, set from the --i custom property, staggers them so only one is visible at a time. Hovering the banner pauses the animation.
Ways to customise it
- Edit the three slide colours in the nth-child rules.
- Change the 12s duration and the 4s step together to speed up or slow down.
- Add a fourth message by changing the duration to 16s and the step to 4s.
Good to know
Auto-rotating text can be hard to read, so the hover pause helps and the reduced-motion rule shows only the first message. Do not hide critical information in a slide that rotates away.
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.