Exits
Slide Out Right Animation
Leaves toward the right edge, fading as it goes.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.slide-out-right {
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: slide-out-right-anim 600ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes slide-out-right-anim {
0% {
transform: translate3d(130px, 90px, 0);
opacity: 1;
animation-timing-function: ease-in;
}
90% {
transform: translate3d(381.828px, 90px, 0);
opacity: 0;
}
100% {
transform: translate3d(430px, 90px, 0);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.slide-out-right {
animation: none;
transition: none;
}
}Why it is built this way
The swipe-to-dismiss exit. Adding a fade means you can travel a shorter distance and still have the element gone by the end, which keeps the whole thing under half a second.
What it animates
2 properties across 2 CSS declarations. The bar shows when each one is moving.
opacitytransformWhat it costs to run
Opacity and x 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.60s across 5 keyframe stops, with every property moving over the same window.
2 curves in play — Ease In and Linear on a card. Different properties easing differently is how a movement gets texture: the eye reads the mismatch as weight rather than as a mistake.
Accessibility
Nothing here hides content — opacity and x move 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.