Entrances
Blur In Animation
Comes into focus from a blur while fading in.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.blur-in {
transform: translate3d(90px, 138px, 0);
width: 300px;
height: 44px;
background: #00000000;
color: #e7e9ee;
font-size: 32px;
font-weight: 700;
animation: blur-in-anim 700ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes blur-in-anim {
0% {
filter: blur(16px);
opacity: 0;
animation-timing-function: ease-out;
}
100% {
filter: none;
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.blur-in {
animation: none;
transition: none;
}
}Why it is built this way
Blur is a filter, and filters are the expensive part of this animation — a large blurred area can drop frames on a phone. Keep the radius small and the element modest in size, or use opacity alone.
What it animates
2 properties across 2 CSS declarations. The bar shows when each one is moving.
filteropacityWhat it costs to run
Filter and opacity are handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.
It runs for 0.70s 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
Starting at opacity 0 makes the reduced-motion guard load-bearing rather than polite: strip it and a reader who asked for less movement gets no content at all, because nothing ever fades it in. It fades over 0.70s alongside filter, and the guard skips all of it together. The generated CSS ends on the resting state, so skipping straight there is safe.