Split Flap Rotating Text
A departures board tile that flips to the next word: the top half falls forward, the bottom half lands with a little bounce. Each half is a clipped copy of the word read from data-text.
Also known as: split flap display css, departure board text, flip board animation.
Next stop
PARIS
TOKYO
OSLO
LIMA
HTML
<div class="txt-split-flap-rotating-text">Next stop
<span class="txt-split-flap-rotating-text-board">
<span style="--i: 0" data-text="PARIS">PARIS</span>
<span style="--i: 1" data-text="TOKYO">TOKYO</span>
<span style="--i: 2" data-text="OSLO">OSLO</span>
<span style="--i: 3" data-text="LIMA">LIMA</span>
</span>
</div>CSS
.txt-split-flap-rotating-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;
display: flex;
align-items: center;
gap: 0.35em;
white-space: nowrap;}
.txt-split-flap-rotating-text-board {
position: relative;
display: inline-grid;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: 0.06em;
}
/* the hinge line across the middle of the tile */
.txt-split-flap-rotating-text-board::after {
content: "";
position: absolute;
z-index: 3;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: rgb(0 0 0 / 0.5);
}
.txt-split-flap-rotating-text-board span {
grid-area: 1 / 1;
position: relative;
padding: 0.1em 0.32em;
color: transparent;
}
.txt-split-flap-rotating-text-board span::before,
.txt-split-flap-rotating-text-board span::after {
content: attr(data-text);
position: absolute;
inset: 0;
padding: inherit;
border-radius: 0.12em;
background: color-mix(in srgb, var(--c) 30%, #0f172a);
color: #f8fafc;
text-align: center;
/* 4 words x 2s = 8s; the extra 0.6s starts the loop on a settled tile */
animation: 8s linear infinite;
animation-delay: calc(var(--i) * 2s - 8.6s);
}
.txt-split-flap-rotating-text-board span::before {
clip-path: inset(0 0 50% 0);
animation-name: txt-split-flap-rotating-text-top;
}
.txt-split-flap-rotating-text-board span::after {
clip-path: inset(50% 0 0 0);
animation-name: txt-split-flap-rotating-text-bottom;
}
.txt-split-flap-rotating-text-board span:not(:first-child)::before,
.txt-split-flap-rotating-text-board span:not(:first-child)::after {
opacity: 0;
}
/* top half: shows for its slot, then falls forward over the next word */
@keyframes txt-split-flap-rotating-text-top {
0%, 24.99% { transform: perspective(5em) rotateX(0); opacity: 1; z-index: 1; }
25% {
transform: perspective(5em) rotateX(0); opacity: 1; z-index: 2;
animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}
28.75% { transform: perspective(5em) rotateX(-90deg); opacity: 1; z-index: 2; }
28.76%, 99.99% { transform: perspective(5em) rotateX(-90deg); opacity: 0; z-index: 1; }
100% { transform: perspective(5em) rotateX(0); opacity: 1; z-index: 1; }
}
/* bottom half: swings down from edge-on, lands, stays until the next one covers it */
@keyframes txt-split-flap-rotating-text-bottom {
0%, 3.75% { transform: perspective(5em) rotateX(90deg); opacity: 0; z-index: 2; }
3.76% {
transform: perspective(5em) rotateX(90deg); opacity: 1; z-index: 2;
animation-timing-function: cubic-bezier(0.3, 0.9, 0.4, 1.3);
}
7.5% { transform: perspective(5em) rotateX(0); opacity: 1; z-index: 2; }
7.51%, 32.5% { transform: perspective(5em) rotateX(0); opacity: 1; z-index: 1; }
32.51%, 100% { transform: perspective(5em) rotateX(90deg); opacity: 0; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
.txt-split-flap-rotating-text, .txt-split-flap-rotating-text *, .txt-split-flap-rotating-text::before, .txt-split-flap-rotating-text::after, .txt-split-flap-rotating-text *::before, .txt-split-flap-rotating-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.