Folding Paper Text
A paper label folds its top half down over the bottom half, holds, then opens again, shading as it turns. The flap is a preserve-3d pair: the printed front half and a plain back.
Also known as: paper fold text css, folded text effect, fold and unfold animation.
HTML
<div class="txt-folding-paper-text" aria-label="Open me"><div class="txt-folding-paper-text-sheet" aria-hidden="true"><span class="txt-folding-paper-text-base">Open me</span><span class="txt-folding-paper-text-flap"><span class="txt-folding-paper-text-front">Open me</span><span class="txt-folding-paper-text-back"></span></span></div></div>
CSS
.txt-folding-paper-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.3);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.2;
display: inline-block;
perspective: 9em;}
.txt-folding-paper-text-sheet {
display: grid;
}
.txt-folding-paper-text-base,
.txt-folding-paper-text-flap {
grid-area: 1 / 1;
}
.txt-folding-paper-text-base,
.txt-folding-paper-text-front,
.txt-folding-paper-text-back {
padding: 0.35em 0.7em;
border-radius: 0.08em;
color: #fff;
background: var(--c);
}
/* the bottom half stays put; the top half is the flap */
.txt-folding-paper-text-base {
clip-path: inset(50% 0 0 0);
}
.txt-folding-paper-text-flap {
display: grid;
transform-style: preserve-3d;
animation: txt-folding-paper-text-fold 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-folding-paper-text-front,
.txt-folding-paper-text-back {
grid-area: 1 / 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.txt-folding-paper-text-front {
clip-path: inset(0 0 50% 0);
animation: txt-folding-paper-text-shade 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* flipped half-turn, so its lower half lands on the top half's spot */
.txt-folding-paper-text-back {
transform: rotateX(180deg);
clip-path: inset(calc(50% - 0.04em) 0 0 0);
background: color-mix(in srgb, var(--c) 72%, #fff);
}
@keyframes txt-folding-paper-text-fold {
0%, 18% { transform: translateZ(0.02em) rotateX(0deg); }
46%, 68% { transform: translateZ(0.02em) rotateX(-180deg); }
96%, 100% { transform: translateZ(0.02em) rotateX(0deg); }
}
@keyframes txt-folding-paper-text-shade {
0%, 18%, 96%, 100% { filter: brightness(1); }
34%, 80% { filter: brightness(0.72); }
}
@media (prefers-reduced-motion: reduce) {
.txt-folding-paper-text, .txt-folding-paper-text *, .txt-folding-paper-text::before, .txt-folding-paper-text::after, .txt-folding-paper-text *::before, .txt-folding-paper-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.