Exits
CSS Fade Out Animation
Fades an element away to nothing.
Card title
Supporting copy goes here.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.fade-out {
transform: translate3d(130px, 90px, 0);
box-shadow: 0px 10px 30px 0px #00000059;
width: 220px;
height: 140px;
background: #1c1e2a;
border-radius: 18px;
color: #e7e9ee;
font-size: 14px;
animation: fade-out-anim 600ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes fade-out-anim {
0% {
opacity: 1;
animation-timing-function: ease-in;
}
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.fade-out {
animation: none;
transition: none;
}
}Why it is built this way
An exit needs forwards fill or the element snaps back to full opacity on the last frame. The generated CSS uses both, so the end state holds — and pair it with a delayed display change if the element must stop taking clicks.
What it animates
1 property across 1 CSS declaration. The bar shows when each one is moving.
opacityWhat it costs to run
Opacity is 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.60s across 2 keyframe stops, with every property moving over the same window.
One curve throughout: Ease In on a card. 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 — opacity moves over 0.60s 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.