Sleepy Text Animation
The letters slowly slump and sag while a little z drifts up, then they jolt awake all at once with a startled hop. A slow ease-in for the droop and a snappy curve for the wake-up sell the timing.
Also known as: drowsy text, nodding off text, zzz text animation.
HTML
<div class="txt-sleepy-text" aria-label="Nap time"><span aria-hidden="true"><span style="--i: 0">N</span><span style="--i: 1">a</span><span style="--i: 2">p</span><span style="--i: 3"> </span><span style="--i: 4">t</span><span style="--i: 5">i</span><span style="--i: 6">m</span><span style="--i: 7">e</span></span><span class="txt-sleepy-text-z" aria-hidden="true">z</span></div>
CSS
.txt-sleepy-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;
position: relative;
display: inline-block;
color: var(--c);}
.txt-sleepy-text span span {
--t: 1;
display: inline-block;
transform-origin: 50% 100%;
animation: txt-sleepy-text-doze 4s infinite;
animation-delay: calc(var(--i) * 0.04s);
}
.txt-sleepy-text span span:nth-child(odd) { --t: -0.6; }
@keyframes txt-sleepy-text-doze {
0% { transform: translateY(0) rotate(0deg) scaleY(1); animation-timing-function: cubic-bezier(0.4, 0, 0.9, 0.6); }
/* droop, doze, then wake with a start */
58% { transform: translateY(0.14em) rotate(calc(var(--t) * 12deg)) scaleY(0.9); animation-timing-function: linear; }
66% { transform: translateY(0.16em) rotate(calc(var(--t) * 13deg)) scaleY(0.88); animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); }
70% { transform: translateY(-0.18em) rotate(calc(var(--t) * -3deg)) scaleY(1.08); animation-timing-function: ease-in-out; }
76% { transform: translateY(0.03em) rotate(0deg) scaleY(0.98); animation-timing-function: ease-out; }
82%, 100% { transform: translateY(0) rotate(0deg) scaleY(1); }
}
.txt-sleepy-text-z {
position: absolute;
top: -0.35em;
right: -0.55em;
font-size: 0.6em;
opacity: 0;
animation: txt-sleepy-text-float 4s ease-out infinite;
}
.txt-sleepy-text-z::after {
content: "z";
position: absolute;
left: 0.8em;
top: -0.8em;
font-size: 0.75em;
}
@keyframes txt-sleepy-text-float {
0%, 22% { opacity: 0; transform: translate(0, 0.6em) scale(0.6) rotate(-12deg); }
38% { opacity: 1; }
62% { opacity: 0.8; transform: translate(0.4em, -0.6em) scale(1.1) rotate(8deg); }
67%, 100% { opacity: 0; transform: translate(0.4em, -0.6em) scale(1.1) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
.txt-sleepy-text, .txt-sleepy-text *, .txt-sleepy-text::before, .txt-sleepy-text::after, .txt-sleepy-text *::before, .txt-sleepy-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.