Bouncing Letters Text Animation
Letters fall in from above one at a time, squash on landing and bounce twice before they settle. Each keyframe carries its own easing, so the fall speeds up like real gravity.
Also known as: bounce in text css, falling letters animation, drop in letters.
Touchdown!
HTML
<div class="txt-bouncing-letters-drop-in" aria-label="Touchdown!"><span style="--i: 0">T</span><span style="--i: 1">o</span><span style="--i: 2">u</span><span style="--i: 3">c</span><span style="--i: 4">h</span><span style="--i: 5">d</span><span style="--i: 6">o</span><span style="--i: 7">w</span><span style="--i: 8">n</span><span style="--i: 9">!</span></div>
CSS
.txt-bouncing-letters-drop-in {
--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);}
.txt-bouncing-letters-drop-in span {
display: inline-block;
transform-origin: 50% 100%;
animation: txt-bouncing-letters-drop-in-fall 1s calc(var(--i) * 70ms) both;
}
/* ease-in on the way down, ease-out on the way up */
@keyframes txt-bouncing-letters-drop-in-fall {
0% { opacity: 0; transform: translateY(-1.6em) scale(0.9, 1.15); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
12% { opacity: 1; }
32% { transform: translateY(0) scale(0.9, 1.15); animation-timing-function: ease-out; }
40% { transform: translateY(0) scale(1.2, 0.78); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
58% { transform: translateY(-0.4em) scale(0.96, 1.05); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
72% { transform: translateY(0) scale(1.08, 0.9); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
84% { transform: translateY(-0.1em) scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
93% { transform: translateY(0) scale(1.02, 0.98); }
100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
.txt-bouncing-letters-drop-in, .txt-bouncing-letters-drop-in *, .txt-bouncing-letters-drop-in::before, .txt-bouncing-letters-drop-in::after, .txt-bouncing-letters-drop-in *::before, .txt-bouncing-letters-drop-in *::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.