Slide in from any side
Four reusable classes slide an element in from the left, right, top or bottom.
CSSBeginner
<div class="grid"><div class="box l">Left</div><div class="box r">Right</div><div class="box t">Top</div><div class="box b">Bottom</div></div>body{overflow:hidden}
.grid{display:grid;grid-template-columns:repeat(2,130px);gap:14px}
.box{height:90px;border-radius:12px;display:grid;place-items:center;font-weight:600;color:#270100;
animation:var(--a) .9s cubic-bezier(.2,.8,.2,1) both}
.l{--a:from-left;background:#f08a5d}.r{--a:from-right;background:#f3d9c8;animation-delay:.12s}
.t{--a:from-top;background:#e8b04c;animation-delay:.24s}.b{--a:from-bottom;background:#d98a8a;animation-delay:.36s}
@keyframes from-left{from{opacity:0;transform:translateX(-80px)}}
@keyframes from-right{from{opacity:0;transform:translateX(80px)}}
@keyframes from-top{from{opacity:0;transform:translateY(-60px)}}
@keyframes from-bottom{from{opacity:0;transform:translateY(60px)}}
@media (prefers-reduced-motion:reduce){.box{animation:none}}<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Slide in</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
body{overflow:hidden}
.grid{display:grid;grid-template-columns:repeat(2,130px);gap:14px}
.box{height:90px;border-radius:12px;display:grid;place-items:center;font-weight:600;color:#270100;
animation:var(--a) .9s cubic-bezier(.2,.8,.2,1) both}
.l{--a:from-left;background:#f08a5d}.r{--a:from-right;background:#f3d9c8;animation-delay:.12s}
.t{--a:from-top;background:#e8b04c;animation-delay:.24s}.b{--a:from-bottom;background:#d98a8a;animation-delay:.36s}
@keyframes from-left{from{opacity:0;transform:translateX(-80px)}}
@keyframes from-right{from{opacity:0;transform:translateX(80px)}}
@keyframes from-top{from{opacity:0;transform:translateY(-60px)}}
@keyframes from-bottom{from{opacity:0;transform:translateY(60px)}}
@media (prefers-reduced-motion:reduce){.box{animation:none}}
</style></head>
<body>
<div class="grid"><div class="box l">Left</div><div class="box r">Right</div><div class="box t">Top</div><div class="box b">Bottom</div></div>
</body></html>Good for
Panels, drawers, toasts and alternating rows in a layout.
Watch out for
Slide from off-screen only with overflow hidden on the parent, or the page gains a horizontal scrollbar.
Accessibility
Wrap motion in @media (prefers-reduced-motion: reduce) and switch it off or shorten it for people who ask for less movement.