Text
Text Reveal Animation
Headline copy wiped upward into view using a CSS mask.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.hero-headline {
transform: translate3d(50px, 132px, 0);
-webkit-mask-image: linear-gradient(to top, #000 82%, transparent 100%);
mask-image: linear-gradient(to top, #000 82%, transparent 100%);
width: 380px;
height: 56px;
background: #00000000;
color: #e7e9ee;
font-size: 40px;
font-weight: 700;
animation: hero-headline-anim 1200ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes hero-headline-anim {
0% {
transform: translate3d(50px, 146px, 0);
-webkit-mask-image: linear-gradient(to top, #000 0%, transparent 0%);
mask-image: linear-gradient(to top, #000 0%, transparent 0%);
animation-timing-function: ease-out;
}
58.33% {
transform: translate3d(50px, 132px, 0);
-webkit-mask-image: linear-gradient(to top, #000 82%, transparent 100%);
mask-image: linear-gradient(to top, #000 82%, transparent 100%);
}
100% {
transform: translate3d(50px, 132px, 0);
-webkit-mask-image: linear-gradient(to top, #000 82%, transparent 100%);
mask-image: linear-gradient(to top, #000 82%, transparent 100%);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-headline {
animation: none;
transition: none;
}
}Why it is built this way
A gradient mask whose stops move, so the text is revealed rather than faded. Unlike a clip-path rectangle, the soft edge of the gradient means the reveal has a feathered leading edge for free.
What it animates
2 properties across 2 CSS declarations. The bar shows when each one is moving.
mask-imagetransformWhat it costs to run
Mixed: y runs on the compositor while mask-image repaints. The compositor half is nearly free; the painted half is what to watch if you scale the element up or run several at once.
It runs for 1.20s across 4 keyframe stops, with every property moving over the same window.
One curve throughout: Ease Out on a text. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
Nothing here hides content — mask-image and y move over 1.20s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.