Domino Text Effect
The letters topple like dominoes, each one tipping over its bottom corner a beat after the one before, the last falling flat. Then they all stand back up and the chain starts again.
Also known as: falling letters chain, domino effect animation, toppling letters css.
HTML
<div class="txt-domino-text" aria-label="Dominoes"><span aria-hidden="true"><span style="--i: 0">D</span><span style="--i: 1">O</span><span style="--i: 2">M</span><span style="--i: 3">I</span><span style="--i: 4">N</span><span style="--i: 5">O</span><span style="--i: 6">E</span><span style="--i: 7">S</span></span></div>
CSS
.txt-domino-text {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
color: var(--c);
letter-spacing: 0.06em;}
.txt-domino-text span span {
--lean: 24deg;
display: inline-block;
/* tip over the bottom right corner */
transform-origin: 100% 85%;
animation: txt-domino-text-topple 3.6s infinite;
animation-delay: calc(var(--i) * 0.09s);
}
.txt-domino-text span span:last-child { --lean: 90deg; }
@keyframes txt-domino-text-topple {
0%, 100% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4); }
8% { transform: rotate(var(--lean)); animation-timing-function: ease-out; }
11% { transform: rotate(calc(var(--lean) - 5deg)); animation-timing-function: ease-in; }
14%, 58% { transform: rotate(var(--lean)); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
72% { transform: rotate(-3deg); animation-timing-function: ease-in-out; }
78% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
.txt-domino-text, .txt-domino-text *, .txt-domino-text::before, .txt-domino-text::after, .txt-domino-text *::before, .txt-domino-text *::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.