16 CSS Fade In Animation Designs 08 / 16

Scale-Down Zoom In Fade

A premium hero that fades in from scale(1.4), shrinking to normal — a dramatic 'punch out' cinematic entrance where content arrives oversized then settles into place.

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

The code

<div class="fi-08">
  <div class="fi-08__hero">
    <span class="fi-08__crown">👑</span>
    <h1 class="fi-08__title">Scale-Down<br><em>Entrance</em></h1>
    <p class="fi-08__sub">Content arrives oversized and shrinks to fit — a cinematic "punch out" effect using scale(1.4) → scale(1) with opacity.</p>
    <div class="fi-08__ribbon">
      <div class="fi-08__ritem">Premium</div>
      <div class="fi-08__ritem">Exclusive</div>
      <div class="fi-08__ritem">Gold Tier</div>
    </div>
  </div>
</div>
.fi-08{
  --bg:#100c1e;--gold:#f59e0b;--amber:#d97706;--text:#fffbeb;
  font-family:'DM Sans',sans-serif;
  min-height:340px;border-radius:20px;
  display:grid;place-items:center;
  padding:40px;overflow:hidden;position:relative;
}
.fi-08::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle 300px at 50% 50%,rgba(245,158,11,.07),transparent);
}
.fi-08 *,.fi-08 *::before,.fi-08 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-08 ::selection{background:var(--gold);color:#000}

/* scale-down fade: scale(1.4) opacity:0 → scale(1) opacity:1 — dramatic zoom-in from large */
.fi-08__hero{
  text-align:center;position:relative;z-index:1;
  opacity:0;transform:scale(1.4);
  animation:fi-08-zoom-in .9s cubic-bezier(.25,.46,.45,.94) .1s forwards;
}
.fi-08__crown{font-size:3rem;margin-bottom:12px;display:block}
.fi-08__title{
  font-family:'Syne',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;
  color:var(--text);line-height:1;margin-bottom:8px;
}
.fi-08__title em{
  font-style:normal;
  background:linear-gradient(90deg,var(--gold),var(--amber));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fi-08__sub{
  font-size:1rem;color:rgba(255,251,235,.5);margin:16px 0 28px;max-width:360px;
  margin-left:auto;margin-right:auto;line-height:1.6;
}
.fi-08__ribbon{
  display:inline-flex;gap:20px;align-items:center;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);
  border-radius:40px;padding:10px 24px;
}
.fi-08__ritem{font-size:.8rem;font-weight:600;color:var(--gold);display:flex;gap:6px;align-items:center}
.fi-08__ritem::before{content:'✦';font-size:.6rem;opacity:.7}
.fi-08__ritem + .fi-08__ritem{border-left:1px solid rgba(245,158,11,.2);padding-left:20px}

@keyframes fi-08-zoom-in{to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .fi-08 *{animation:none!important;opacity:1!important;transform:scale(1)!important}
}

How this works

The hero block starts at opacity: 0; transform: scale(1.4) and animates to opacity: 1; transform: scale(1). This is the inverse of the scale-up pattern: the element begins oversized and contracts to its natural size. The cubic-bezier(.25, .46, .45, .94) is a gentle ease-out — no overshoot — so the shrink feels like a settling, not a bounce.

The scale factor 1.4 is chosen carefully: anything above 1.6 causes the element to clip at container edges, and anything below 1.2 is barely perceptible. Because the element fills most of its container at 1.4×, the entrance reads as a dramatic 'zoom in from large' even with no positional offset. The radial gradient background glow reinforces the sense of depth.

Customize

  • Reduce the start scale from 1.4 to 1.15 for a subtle zoom — suits content-heavy hero sections.
  • Add a slight translateY(-10px → 0) to the keyframe so the hero appears to drift down as it shrinks.
  • Change easing to cubic-bezier(.34,1.2,.64,1) for a tiny overshoot — the hero settles with a bounce.
  • Add a second element (subtitle) with a scale(1.2 → 1) reveal delayed 0.3s after the main headline.

Watch out for

  • Starting scale(1.4) may cause the element to overflow its container — apply overflow: hidden to the wrapper if the page doesn't have natural overflow clipping.
  • Using ease instead of the specified ease-out creates a visible acceleration at the end of the shrink — the element appears to slam into its final size. Always use an ease-out curve.
  • If the element is positioned inside a CSS transform container (e.g. a slide), the scale animation stacks with the parent transform, resulting in unexpected size at start.

Browser support

ChromeSafariFirefoxEdge
60+ 12+ 60+ 60+

scale() animation is GPU-composited; no prefix required in modern browsers

More from 16 CSS Fade In Animation Designs

Directional Slide-Fade UpScale-Up 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 Fade
View the full collection →

Search CodeFronts

Loading…

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