22 CSS Transition Effects 04 / 22

Text Reveal Animation

Clip-path translateY hero reveal, wipe-over hover on list rows, shimmer sweep on cards and animated grain background texture.

Pure CSS 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="eyebrow"><div class="reveal-clip"><span>Text Reveal Transitions</span></div></div>
  <h1>
    <div class="big-word"><div class="reveal-clip"><span>Type</span></div></div>
    <div class="big-word"><div class="reveal-clip"><span><em>In</em></span></div></div>
    <div class="big-word"><div class="reveal-clip"><span>Mo</span></div></div>
    <div class="big-word"><div class="reveal-clip"><span>tion.</span></div></div>
  </h1>
  <div class="desc-wrap"><p class="desc">Clip-mask reveals, wipe-overs and shimmer transitions for every text element on your page — zero JavaScript, pure CSS.</p></div>
</div>

<div class="marquee-strip">
  <div class="marquee-inner">
    <span><b>Reveal</b> · Typography · Animation · CSS · Transitions · Text Motion ·</span>
    <span>Clip Reveal · Wipe · Blur · Shimmer · <b>Stagger</b> · Entrance ·</span>
    <span><b>Reveal</b> · Typography · Animation · CSS · Transitions · Text Motion ·</span>
    <span>Clip Reveal · Wipe · Blur · Shimmer · <b>Stagger</b> · Entrance ·</span>
  </div>
</div>

<section>
  <div style="font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:#c9b99a;margin-bottom:12px">Hover wipe technique</div>
  <h2 style="font-family:'Playfair Display';font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;margin-bottom:40px;letter-spacing:-.02em">Selected Work</h2>

  <div class="wipe-wrap">
    <div class="wipe-item"><span class="wipe-num">01</span><span class="wipe-title">Brand Identity Systems</span><span class="wipe-arrow">→</span></div>
    <div class="wipe-item"><span class="wipe-num">02</span><span class="wipe-title">Editorial Typography</span><span class="wipe-arrow">→</span></div>
    <div class="wipe-item"><span class="wipe-num">03</span><span class="wipe-title">Motion Design Reels</span><span class="wipe-arrow">→</span></div>
    <div class="wipe-item"><span class="wipe-num">04</span><span class="wipe-title">Interactive Installations</span><span class="wipe-arrow">→</span></div>
    <div class="wipe-item"><span class="wipe-num">05</span><span class="wipe-title">Digital Art Direction</span><span class="wipe-arrow">→</span></div>
  </div>

  <div class="scramble-grid">
    <div class="sc-card">
      <div class="sc-num">01</div>
      <div class="sc-title-wrap">
        <div class="sc-label">Technique</div>
        <div class="sc-title">Clip-Path Reveal</div>
        <p class="sc-desc">translateY from 110% behind overflow:hidden — the cleanest, most performant text entrance.</p>
      </div>
    </div>
    <div class="sc-card">
      <div class="sc-num">02</div>
      <div class="sc-title-wrap">
        <div class="sc-label">Technique</div>
        <div class="sc-title">Wipe Background</div>
        <p class="sc-desc">scaleX on a pseudo-element creates a horizontal colour wipe over the entire row.</p>
      </div>
    </div>
    <div class="sc-card">
      <div class="sc-num">03</div>
      <div class="sc-title-wrap">
        <div class="sc-label">Technique</div>
        <div class="sc-title">Shimmer Sweep</div>
        <p class="sc-desc">A translucent gradient swept left-to-right with a left-position transition — zero opacity tricks.</p>
      </div>
    </div>
    <div class="sc-card">
      <div class="sc-num">04</div>
      <div class="sc-title-wrap">
        <div class="sc-label">Technique</div>
        <div class="sc-title">Blur Defocus</div>
        <p class="sc-desc">filter:blur(8px) → blur(0) combined with opacity creates a soft focus-pull entrance for characters.</p>
      </div>
    </div>
  </div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Montserrat:wght@400;600;700;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Montserrat',sans-serif;background:#faf8f3;overflow-x:hidden}

/* Hero */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;background:#0c0b0a;position:relative;overflow:hidden}

/* animated grain overlay */
.hero::before{content:'';position:absolute;inset:-50%;width:200%;height:200%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");opacity:.4;animation:trn04-grain .4s steps(2) infinite}
@keyframes trn04-grain{0%{transform:translate(0)}25%{transform:translate(-2%,2%)}50%{transform:translate(3%,-1%)}75%{transform:translate(-1%,3%)}100%{transform:translate(2%,-2%)}}

/* Clip reveal — the main technique: overflow:hidden + translate */
.reveal-clip{overflow:hidden;display:block}
.reveal-clip span{display:block;transform:translateY(110%);animation:trn04-clipup .9s cubic-bezier(.22,1,.36,1) forwards}

.hero .eyebrow .reveal-clip span{animation-delay:.1s;font-size:.78rem;letter-spacing:.4em;text-transform:uppercase;color:#c9b99a}
.big-word{margin-bottom:4px}
.big-word:nth-child(2) .reveal-clip span{animation-delay:.25s}
.big-word:nth-child(3) .reveal-clip span{animation-delay:.4s}
.big-word:nth-child(4) .reveal-clip span{animation-delay:.55s}
@keyframes trn04-clipup{to{transform:translateY(0)}}

.hero h1{font-family:'Playfair Display';font-size:clamp(5rem,16vw,12rem);line-height:.85;letter-spacing:-.04em;color:#fff;font-weight:900}
.hero h1 em{color:#c9b99a;font-style:italic}
.hero .desc-wrap{overflow:hidden;margin-top:40px}
.hero .desc{color:#888;font-size:1rem;transform:translateY(60px);animation:trn04-clipup .8s .75s cubic-bezier(.22,1,.36,1) forwards;max-width:50ch;margin:0 auto}

/* Sections */
section{padding:100px 24px;max-width:1200px;margin:0 auto}

/* Wipe reveal — box-shadow wipe on hover */
.wipe-wrap{display:flex;flex-direction:column;gap:0;border-top:1px solid #e0d9cc}
.wipe-item{border-bottom:1px solid #e0d9cc;padding:24px 0;display:flex;align-items:center;gap:24px;cursor:default;position:relative;overflow:hidden;transition:padding .3s}
.wipe-item::before{content:'';position:absolute;inset:0;background:#1a1a1a;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:0}
.wipe-item:hover::before{transform:scaleX(1)}
.wipe-item:hover{padding-left:20px}
.wipe-num{font-size:.7rem;font-weight:700;letter-spacing:.2em;color:#c9b99a;min-width:32px;position:relative;z-index:1;transition:color .3s .1s}
.wipe-item:hover .wipe-num{color:#c9b99a}
.wipe-title{font-family:'Playfair Display';font-size:clamp(1.4rem,4vw,2.4rem);font-weight:700;position:relative;z-index:1;transition:color .3s .1s}
.wipe-item:hover .wipe-title{color:#fff}
.wipe-arrow{margin-left:auto;font-size:1.4rem;position:relative;z-index:1;transition:transform .3s .1s,color .3s .1s}
.wipe-item:hover .wipe-arrow{transform:translateX(8px) rotate(-45deg);color:#fff}

/* Scramble on hover — CSS only shimmer */
.scramble-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;margin-top:64px}
.sc-card{background:#1a1a1a;padding:32px;position:relative;overflow:hidden;cursor:default}
.sc-card::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,185,154,.12),transparent);transition:left .6s ease}
.sc-card:hover::after{left:150%}
.sc-card .sc-num{font-size:4rem;font-weight:900;color:rgba(201,185,154,.08);line-height:1;font-family:'Playfair Display'}
.sc-card .sc-label{font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;color:#c9b99a;margin-bottom:8px}
.sc-card .sc-title{font-family:'Playfair Display';font-size:1.3rem;color:#fff;line-height:1.2;margin-bottom:10px}
.sc-card .sc-desc{font-size:.82rem;color:#666;line-height:1.6}
.sc-title-wrap{position:relative;z-index:1}

/* blur-in chars */
.char-reveal{display:inline-flex;flex-wrap:wrap;gap:0}
.char{display:inline-block;opacity:0;filter:blur(8px);transition:opacity .4s,filter .4s,transform .4s}
.char.visible{opacity:1;filter:blur(0);transform:none}
.char-row{overflow:hidden}

/* marquee strip */
.marquee-strip{background:#1a1a1a;overflow:hidden;padding:18px 0;display:flex;gap:0;white-space:nowrap}
.marquee-inner{display:inline-flex;gap:0;animation:trn04-marq 14s linear infinite}
@keyframes trn04-marq{to{transform:translateX(-50%)}}
.marquee-inner span{font-family:'Playfair Display';font-size:1.1rem;font-style:italic;color:rgba(201,185,154,.6);padding:0 32px}
.marquee-inner b{color:#c9b99a}

@media (prefers-reduced-motion:reduce){.reveal-clip span,.hero .desc,.hero::before,.marquee-inner,.char{animation:none !important;transform:none !important;opacity:1 !important;filter:none !important}}

More from 22 CSS Transition Effects

Button Hover TransitionsFlip Card 3D TransitionImage Zoom Hover TransitionBackground Color TransitionBorder Animation TransitionNavigation Hover TransitionUnderline Animation HoverGlassmorphism Hover TransitionSlide-In Animation on ScrollFade In Fade Out TransitionLoading Skeleton TransitionModal Open Close Transition
View the full collection →

Search CodeFronts

Loading…

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