Tick Tock Text Animation
Letters lean one way, hold, then snap to the other side on the next tick, like a row of metronomes. The snap ripples along with a 30ms stagger, and an overshooting curve makes each one wobble.
Also known as: metronome text, ticking letters, clock tick text.
HTML
<div class="txt-tick-tock-text" aria-label="Tick tock"><span aria-hidden="true"><span style="--i: 0">T</span><span style="--i: 1">i</span><span style="--i: 2">c</span><span style="--i: 3">k</span><span style="--i: 4"> </span><span style="--i: 5">t</span><span style="--i: 6">o</span><span style="--i: 7">c</span><span style="--i: 8">k</span></span></div>
CSS
.txt-tick-tock-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.03em;}
.txt-tick-tock-text span span {
display: inline-block;
transform-origin: 50% 90%;
animation: txt-tick-tock-text-tick 1.4s cubic-bezier(0.3, 1.9, 0.5, 1) infinite;
animation-delay: calc(var(--i) * 0.03s);
}
@keyframes txt-tick-tock-text-tick {
0%, 42% { transform: rotate(-9deg); }
50%, 92% { transform: rotate(9deg); }
100% { transform: rotate(-9deg); }
}
@media (prefers-reduced-motion: reduce) {
.txt-tick-tock-text, .txt-tick-tock-text *, .txt-tick-tock-text::before, .txt-tick-tock-text::after, .txt-tick-tock-text *::before, .txt-tick-tock-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.