22 CSS Transition Effects 08 / 22

Fade In Fade Out Transition

Aurora hero, card crossfade overlays, JS-driven fade tabs with four panels and staggered notification stack with opacity transitions.

CSS + JS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="hero">
  <div class="aurora">
    <span></span><span></span><span></span>
  </div>
  <h1>Fade <em>In</em><br>Fade Out</h1>
</div>

<section>
  <span class="sl">Hover to crossfade</span>
  <h2 class="sh">Card fade overlays</h2>
  <div class="fade-grid">
    <div class="fade-card fc1">
      <div class="base-emoji">🌊</div>
      <div class="base"><h3>Hover me →</h3></div>
      <div class="over"><h3>Ocean Drift</h3><p>Opacity fade from 0 to 1 on the overlay, simultaneous 1 to 0 on the base.</p></div>
    </div>
    <div class="fade-card fc2">
      <div class="base-emoji">☀️</div>
      <div class="base"><h3>Hover me →</h3></div>
      <div class="over"><h3>Desert Gold</h3><p>Crossfade with contrasting background — both panels use the same opacity transition.</p></div>
    </div>
    <div class="fade-card fc3">
      <div class="base-emoji">🌌</div>
      <div class="base"><h3>Hover me →</h3></div>
      <div class="over"><h3>Nebula Deep</h3><p>Delayed overlay fade (.5s vs .4s) gives the entrance a fraction of lag for depth.</p></div>
    </div>
    <div class="fade-card fc4">
      <div class="base-emoji">🌿</div>
      <div class="base"><h3>Hover me →</h3></div>
      <div class="over"><h3>Forest Canopy</h3><p>The emoji silhouette fades with the base layer — children inherit the parent opacity.</p></div>
    </div>
  </div>

  <span class="sl">Tabs — fade between panels</span>
  <h2 class="sh">Tab content fades</h2>
  <div class="tabs" id="tabs">
    <div class="tab active" data-tab="0">Features</div>
    <div class="tab" data-tab="1">Pricing</div>
    <div class="tab" data-tab="2">Roadmap</div>
    <div class="tab" data-tab="3">Changelog</div>
  </div>
  <div class="tab-panels">
    <div class="tab-panel tp1 active"><h3>Features</h3><p>Powerful tools built for modern workflows. Every interaction is smooth, deliberate and accessible.</p></div>
    <div class="tab-panel tp2"><h3>Pricing</h3><p>Simple, transparent pricing with no hidden fees. Scale as you grow — pay only for what you use.</p></div>
    <div class="tab-panel tp3"><h3>Roadmap</h3><p>Q3 2026: multi-region sync. Q4 2026: AI-assisted workflows. 2027: real-time collaboration mode.</p></div>
    <div class="tab-panel tp4"><h3>Changelog</h3><p>v4.2 — Redesigned dashboard, 40% faster load times, new API endpoints for bulk operations.</p></div>
  </div>
</section>

<section style="padding-top:0">
  <span class="sl">Staggered fade-in</span>
  <h2 class="sh">Notification stack</h2>
  <div class="notif-demo">
    <div class="notif"><div class="ni">✅</div><div><div class="nt">Deploy succeeded</div><div class="nd">Production · 2 min ago</div></div></div>
    <div class="notif"><div class="ni">💬</div><div><div class="nt">New comment on issue #418</div><div class="nd">Yuki M. · 5 min ago</div></div></div>
    <div class="notif"><div class="ni">⚠️</div><div><div class="nt">High memory on worker-3</div><div class="nd">Infra alert · 12 min ago</div></div></div>
    <div class="notif"><div class="ni">🔴</div><div><div class="nt">API latency spike detected</div><div class="nd">Monitor · 18 min ago</div></div></div>
  </div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,700;1,300;1,700&family=IBM+Plex+Sans:wght@300;400;600&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'IBM Plex Sans',sans-serif;background:#fafaf8;color:#1c1c1e;overflow-x:hidden}

/* hero */
.hero{background:#1c1c1e;min-height:90vh;display:flex;align-items:center;justify-content:center;padding:60px 24px;position:relative;overflow:hidden}
.hero h1{font-family:'Fraunces';font-size:clamp(3rem,10vw,7.5rem);font-weight:700;color:#fff;text-align:center;line-height:.85;letter-spacing:-.04em;position:relative;z-index:1}
.hero h1 em{font-style:italic;color:#d4a853}

/* aurora bg */
.aurora{position:absolute;inset:0;z-index:0;opacity:.3}
.aurora span{position:absolute;border-radius:50%;filter:blur(80px);animation:trn08-drift 8s ease-in-out infinite}
.aurora span:nth-child(1){width:50vw;height:50vw;background:#7c3aed;top:-10%;left:-10%;animation-duration:9s}
.aurora span:nth-child(2){width:40vw;height:40vw;background:#0ea5e9;bottom:-10%;right:-10%;animation-duration:11s;animation-delay:-3s}
.aurora span:nth-child(3){width:30vw;height:30vw;background:#d4a853;top:50%;left:50%;animation-duration:7s;animation-delay:-5s}
@keyframes trn08-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(4%,6%)}}

section{padding:80px 24px;max-width:1100px;margin:0 auto}
.sl{font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#9ca3af;margin-bottom:12px;display:block}
.sh{font-family:'Fraunces';font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;margin-bottom:36px;letter-spacing:-.03em}

/* FADE OVERLAYS on cards */
.fade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:56px}
.fade-card{position:relative;height:260px;border-radius:20px;overflow:hidden;cursor:default;background:var(--bg)}
.fade-card .base{position:absolute;inset:0;display:flex;align-items:flex-end;padding:24px;transition:opacity .4s}
.fade-card .over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;opacity:0;transition:opacity .5s}
.fade-card:hover .base{opacity:0}
.fade-card:hover .over{opacity:1}

.fc1{--bg:linear-gradient(145deg,#1e3a5f,#0c1a2e)}
.fc1 .base h3{color:#fff;font-size:1.1rem;font-weight:600}
.fc1 .over{background:rgba(14,165,233,.95)}
.fc1 .over h3{color:#fff;font-family:'Fraunces';font-size:1.5rem;margin-bottom:8px}
.fc1 .over p{color:rgba(255,255,255,.8);font-size:.85rem;line-height:1.5}

.fc2{--bg:linear-gradient(145deg,#3b1a08,#1c0d04)}
.fc2 .base h3{color:#d4a853;font-size:1.1rem;font-weight:600}
.fc2 .over{background:rgba(212,168,83,.95)}
.fc2 .over h3{color:#1c0d04;font-family:'Fraunces';font-size:1.5rem;margin-bottom:8px}
.fc2 .over p{color:rgba(28,13,4,.75);font-size:.85rem;line-height:1.5}

.fc3{--bg:linear-gradient(145deg,#1a1a2e,#0f0e17)}
.fc3 .base h3{color:#a78bfa;font-size:1.1rem;font-weight:600}
.fc3 .over{background:rgba(124,58,237,.95)}
.fc3 .over h3{color:#fff;font-family:'Fraunces';font-size:1.5rem;margin-bottom:8px}
.fc3 .over p{color:rgba(255,255,255,.8);font-size:.85rem;line-height:1.5}

.fc4{--bg:linear-gradient(145deg,#0a2a1f,#04140e)}
.fc4 .base h3{color:#34d399;font-size:1.1rem;font-weight:600}
.fc4 .over{background:rgba(5,150,105,.95)}
.fc4 .over h3{color:#fff;font-family:'Fraunces';font-size:1.5rem;margin-bottom:8px}
.fc4 .over p{color:rgba(255,255,255,.8);font-size:.85rem;line-height:1.5}

/* base decoration */
.fade-card .base-emoji{font-size:3rem;position:absolute;top:24px;right:24px;opacity:.3}

/* FADE tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tab{padding:10px 20px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;border:2px solid #e5e7eb;color:#6b7280;transition:all .3s}
.tab.active,.tab:hover{background:#1c1c1e;color:#fff;border-color:#1c1c1e}
.tab-panels{position:relative;height:200px;background:#fff;border-radius:16px;border:2px solid #e5e7eb;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.tab-panel{position:absolute;inset:0;padding:32px;opacity:0;transition:opacity .4s ease;pointer-events:none}
.tab-panel.active{opacity:1;pointer-events:auto}
.tab-panel h3{font-family:'Fraunces';font-size:1.4rem;margin-bottom:8px}
.tab-panel p{color:#6b7280;font-size:.9rem;line-height:1.6}
.tp1{background:linear-gradient(135deg,#eff6ff,#dbeafe)}
.tp2{background:linear-gradient(135deg,#fdf4ff,#f3e8ff)}
.tp3{background:linear-gradient(135deg,#f0fdf4,#dcfce7)}
.tp4{background:linear-gradient(135deg,#fff7ed,#fed7aa)}

/* Notification fade stack */
.notif-demo{max-width:380px;display:flex;flex-direction:column;gap:12px}
.notif{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:16px;box-shadow:0 4px 20px rgba(0,0,0,.08);border-left:4px solid var(--c);animation:trn08-fadein .5s cubic-bezier(.22,1,.36,1) both}
.notif:nth-child(1){animation-delay:.1s;--c:#3b82f6}
.notif:nth-child(2){animation-delay:.3s;--c:#10b981}
.notif:nth-child(3){animation-delay:.5s;--c:#f59e0b}
.notif:nth-child(4){animation-delay:.7s;--c:#ef4444}
@keyframes trn08-fadein{from{opacity:0;transform:translateX(30px)}}
.notif .ni{font-size:1.4rem}
.notif .nt{font-size:.88rem;font-weight:600;color:#1c1c1e}
.notif .nd{font-size:.75rem;color:#9ca3af;margin-top:2px}

@media (prefers-reduced-motion:reduce){.aurora span,.notif,.fade-card .base,.fade-card .over{animation:none !important;transition:none !important;opacity:1 !important}}
document.getElementById('tabs').addEventListener('click',e=>{
  const tab = e.target.closest('[data-tab]'); if(!tab) return;
  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
  document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));
  tab.classList.add('active');
  document.querySelectorAll('.tab-panel')[+tab.dataset.tab].classList.add('active');
});

More from 22 CSS Transition Effects

Staggered List AnimationCursor Trail EffectMagnetic Button EffectSplit Text Reveal TransitionProgress Bar AnimationButton Hover TransitionsFlip Card 3D TransitionText Reveal AnimationImage Zoom Hover TransitionBackground Color TransitionBorder Animation TransitionNavigation Hover Transition
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →