Exits
Blur Out Animation
Defocuses into nothing.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.blur-out {
transform: translate3d(90px, 138px, 0);
width: 300px;
height: 44px;
background: #00000000;
color: #e7e9ee;
font-size: 32px;
font-weight: 700;
animation: blur-out-anim 700ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes blur-out-anim {
0% {
filter: none;
opacity: 1;
animation-timing-function: ease-in;
}
100% {
filter: blur(16px);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.blur-out {
animation: none;
transition: none;
}
}Why it is built this way
Useful when something is being replaced rather than removed — the outgoing content going soft while the new content sharpens reads as a swap. Two of these running at once is expensive, so keep the areas small.
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 In 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 — filter and opacity move over 0.70s 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.