Reveals
Wipe Right Reveal
Content wipes into view from the left edge rightward.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.wipe-right {
transform: translate3d(90px, 138px, 0);
-webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
mask-image: linear-gradient(to right, #000 86%, transparent 100%);
width: 300px;
height: 44px;
background: #00000000;
color: #e7e9ee;
font-size: 32px;
font-weight: 700;
animation: wipe-right-anim 800ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes wipe-right-anim {
0% {
-webkit-mask-image: linear-gradient(to right, #000 0%, transparent 0%);
mask-image: linear-gradient(to right, #000 0%, transparent 0%);
animation-timing-function: ease-out;
}
100% {
-webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
mask-image: linear-gradient(to right, #000 86%, transparent 100%);
}
}
@media (prefers-reduced-motion: reduce) {
.wipe-right {
animation: none;
transition: none;
}
}Why it is built this way
Reads as text being written, which makes it a good fit for headlines and a poor one for images. The mask travels with a soft edge so the boundary does not look like a hard cut.
What it animates
1 property across 1 CSS declaration. The bar shows when each one is moving.
mask-imageWhat it costs to run
Mask-image repaints on every frame rather than running on the compositor. There is no reflow, so this is far cheaper than animating width or height — but keep the painted area modest.
It runs for 0.80s across 2 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 moves over 0.80s 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.