16 CSS Fade In Animation Designs 06 / 16

Directional Slide-Fade Up

A two-column feature section where the text block slides up from below while card items follow with sequential translateY(30px → 0) + opacity delays for a rising-content effect.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="fi-06">
  <div class="fi-06__left">
    <div class="fi-06__eyebrow">Premium Features</div>
    <h2 class="fi-06__heading">Everything you need to ship faster</h2>
    <p class="fi-06__body">Components slide into view from below as the page loads, creating a sense of content rising to meet the reader — directional fade with translateY.</p>
    <a href="#" class="fi-06__link">Explore features →</a>
  </div>
  <div class="fi-06__right">
    <div class="fi-06__card">
      <div class="fi-06__icon">⚡</div>
      <div><div class="fi-06__cname">Lightning Build</div><div class="fi-06__cmeta">Zero-config bundling</div></div>
    </div>
    <div class="fi-06__card">
      <div class="fi-06__icon">🎨</div>
      <div><div class="fi-06__cname">Design Tokens</div><div class="fi-06__cmeta">CSS custom properties</div></div>
    </div>
    <div class="fi-06__card">
      <div class="fi-06__icon">🔒</div>
      <div><div class="fi-06__cname">Auth Built-in</div><div class="fi-06__cmeta">JWT + OAuth 2.0</div></div>
    </div>
  </div>
</div>
.fi-06{
  --bg:#0e0a1a;--violet:#7c3aed;--indigo:#4f46e5;--text:#ede9fe;
  font-family:'DM Sans',sans-serif;
  min-height:340px;border-radius:20px;
  padding:40px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;
}
.fi-06 *,.fi-06 *::before,.fi-06 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-06 ::selection{background:var(--violet);color:#fff}

/* slide-fade from below: translateY(40px) opacity:0 → Y(0) opacity:1 */
.fi-06__left{
  opacity:0;transform:translateY(40px);
  animation:fi-06-up .8s cubic-bezier(.16,1,.3,1) .1s forwards;
}
.fi-06__eyebrow{
  font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--violet);margin-bottom:14px;
}
.fi-06__heading{
  font-family:'Syne',sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:800;color:var(--text);line-height:1.15;margin-bottom:14px;
}
.fi-06__body{font-size:.9rem;color:rgba(237,233,254,.5);line-height:1.7;margin-bottom:20px}
.fi-06__link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.85rem;font-weight:600;color:var(--violet);
  text-decoration:none;border-bottom:1px solid rgba(124,58,237,.3);
  padding-bottom:2px;transition:border-color .2s;
}
.fi-06__link:hover{border-color:var(--violet)}

.fi-06__right{display:flex;flex-direction:column;gap:12px}
.fi-06__card{
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(79,70,229,.06));
  border:1px solid rgba(124,58,237,.2);border-radius:12px;padding:16px 20px;
  display:flex;gap:14px;align-items:center;
  opacity:0;transform:translateY(30px);
}
.fi-06__card:nth-child(1){animation:fi-06-up .7s cubic-bezier(.16,1,.3,1) .3s forwards}
.fi-06__card:nth-child(2){animation:fi-06-up .7s cubic-bezier(.16,1,.3,1) .45s forwards}
.fi-06__card:nth-child(3){animation:fi-06-up .7s cubic-bezier(.16,1,.3,1) .6s forwards}
.fi-06__icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(124,58,237,.2);
  display:grid;place-items:center;font-size:1.1rem;flex-shrink:0;
}
.fi-06__cname{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:2px}
.fi-06__cmeta{font-size:.72rem;color:rgba(237,233,254,.4)}

@keyframes fi-06-up{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .fi-06 *{animation:none!important;opacity:1!important;transform:none!important}
}

How this works

Two independent regions animate simultaneously: the left text block carries animation: fi-06-up .8s ease .1s forwards; the three right cards each have the same keyframe but at delays of 0.3s, 0.45s, and 0.6s. All start at opacity: 0; transform: translateY(30–40px). The @keyframes fi-06-up { to { opacity: 1; transform: translateY(0) } } keyframe is defined once and referenced by all rules.

The direction — upward — creates a 'content rising to meet you' feeling. Choosing a larger offset (40px vs 16px) for the main headline and a smaller one (30px) for the cards creates subtle depth differentiation. The cubic-bezier(.16, 1, .3, 1) ease-out gives the headline a confident entrance that slows to a gentle rest.

Customize

  • Reverse the direction: change translateY(40px) to translateY(-40px) for a top-down fall.
  • Add a right-column slide-from-right by using translateX(40px → 0) on the cards for opposite directions.
  • Tighten the gap between left and first card by reducing the delay from .3s to .2s.
  • Increase the offset on the heading to translateY(60px) for a more dramatic primary element entrance.

Watch out for

  • Applying transform: translateY() and animation on the same element can conflict if you also set transform in a hover rule — the animation's forwards fill wins. Use a wrapper element for hover transforms.
  • Large translateY offsets (>60px) can cause content below to visibly jump as the element moves into position on low-speed connections where fonts are still loading.
  • Ensure the animation-duration is long enough for the easing tail — cubic-bezier(.16,1,.3,1) has a long deceleration; below 0.6s it clips the ease.

Browser support

ChromeSafariFirefoxEdge
60+ 12+ 60+ 60+

translateY animation fully GPU-composited in all evergreen browsers

More from 16 CSS Fade In Animation Designs

Scale-Down Zoom In FadeRotateX Perspective Tilt FadeSkew Sweep FadeRadial Clip-Path Mask RevealGreyscale to Color Saturate FadeRotateY Flip Card FadeGlitch Flash Multi-Step FadeScroll-Triggered Observer FadeWord-by-Word Split FadeCascade Letter Drop FadePure Opacity Hero FadeClip-Path Inset Reveal
View the full collection →

Search CodeFronts

Loading…

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