Entrances
CSS Fade In Animation
The plainest entrance there is: opacity 0 to 1, nothing else moving.
Card title
Supporting copy goes here.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.fade-in {
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-in-anim 600ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes fade-in-anim {
0% {
opacity: 0;
animation-timing-function: ease-out;
}
100% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.fade-in {
animation: none;
transition: none;
}
}Why it is built this way
Animating opacity alone is the cheapest entrance a browser can run — it is composited on the GPU and never triggers layout or paint. When a list of items all animate at once, this is the one that stays smooth on a slow phone.
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 Out 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
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. The fade is the whole animation here, so the guard has only one thing to silence. The generated CSS ends on the resting state, so skipping straight there is safe.