Rotating Words
One word in a sentence cycles through alternatives, each sliding up to replace the last. The list ends with a repeat of the first word so the loop closes without a jump.
Also known as: word carousel, changing text animation, text slider.
We build
apps.brands.websites.apps.
HTML
<div class="txt-word-rotate">We build
<span class="txt-word-rotate-words">
<span>apps.</span><span>brands.</span><span>websites.</span><span>apps.</span>
</span>
</div>CSS
.txt-word-rotate {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
display: flex;
gap: 0.3em;
color: #1f2937;}
.txt-word-rotate-words {
display: inline-block;
height: 1.2em;
overflow: hidden;
color: var(--c);
}
.txt-word-rotate-words span {
display: block;
animation: txt-word-rotate-cycle 6s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}
@keyframes txt-word-rotate-cycle {
0%, 25% { transform: translateY(0); }
33%, 58% { transform: translateY(-1.2em); }
66%, 91% { transform: translateY(-2.4em); }
100% { transform: translateY(-3.6em); }
}
@media (prefers-reduced-motion: reduce) {
.txt-word-rotate, .txt-word-rotate *, .txt-word-rotate::before, .txt-word-rotate::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.