CHROME TEXT
INTERACTION_019CSS
Shimmer Text
A metallic highlight sweeps through the letterforms.
Typography / LightView
Back to library
INTERACTION_018
Headline Reveal.
Each headline line sits in an overflow-hidden wrapper and translates from 100% to 0 with a stagger, the standard editorial hero entrance.
- CATEGORY
- Typography
- COMPLEXITY
- Easy
- TECH
- CSS
- PLATFORM
- Both
- PERFORMANCE
- Light
LIVE PLAYGROUND
MOVEDIFFERENT.
CSS / CSS
.line { overflow: hidden; }
.line > span {
display: block;
transform: translateY(100%);
animation: rise 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i) * 90ms);
}
@keyframes rise { to { transform: translateY(0); } }