CSS Entrance Animations — 20 Effects for Element Reveals with Code

Try them live — All 20 entrance animations are available on CSSKit where you can customize parameters and copy the code. Source code on GitHub. See also Background Part 1, Background Part 2.

---

Entrance animations control how elements appear on screen. They’re triggered once — when a section scrolls into view, a modal opens, or a page loads. Unlike infinite loops, entrance animations use forwards fill mode to hold the final state. In this post, we’ll build 20 CSS entrance animations, from simple fade-slides to dramatic spiral entrances.

91. Fade Slide Up

The classic — fade in while sliding up. The most-used entrance animation on the web.

How It Works

Two properties animate together: opacity goes from 0 to 1 while translateY moves from var(--fsu-distance) to 0. The ease-out timing makes the element decelerate as it reaches its final position. The forwards fill mode keeps it visible after the animation completes.

.fade-slide-up {
  --fsu-distance: 30px;
  --fsu-speed: 0.8s;
  --fsu-color: #f8fafc;
  font-size: 2rem;
  font-weight: 800;
  color: var(--fsu-color);
  animation: fsu-in var(--fsu-speed) ease-out forwards;
}

@keyframes fsu-in {
  from { opacity: 0; transform: translateY(var(--fsu-distance)); }
  to { opacity: 1; transform: translateY(0); }
}

<div class="fade-slide-up">Fade Slide Up</div>

Tip: This is the most versatile entrance. Use it for headings, paragraphs, cards — anything that needs a clean, professional entrance.

---

92. Bounce In

Bouncy entrance with overshoot — fun and energetic.

How It Works

The element starts at scale(0) and grows through three stages: overshoot to scale(1.1) at 60%, undershoot to scale(0.95) at 80%, then settle at scale(1). The cubic-bezier(0.68, -0.55, 0.265, 1.55) adds additional spring-like overshoot to the overall timing.

.bounce-in {
  --bi-scale: 1;
  --bi-speed: 0.8s;
  --bi-color: #fb923c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: var(--bi-color);
  border-radius: 16px;
  color: white;
  font-weight: 700;
  animation: bi-enter var(--bi-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  transform: scale(0);
}

@keyframes bi-enter {
  0% { transform: scale(0); }
  60% { transform: scale(calc(var(--bi-scale) * 1.1)); }
  80% { transform: scale(calc(var(--bi-scale) * 0.95)); }
  100% { transform: scale(var(--bi-scale)); }
}

<div class="bounce-in">Bounce!</div>

---

93. Blur In

Element sharpens from a blurred state — cinematic reveal.

How It Works

Three properties animate simultaneously: filter: blur() goes from 20px to 0, opacity fades from 0 to 1, and transform: scale() subtly shrinks from 1.1 to 1. The slight scale-down combined with the blur removal creates a “focusing camera lens” effect.

.blur-in {
  --blin-color: #e2e8f0;
  --blin-amount: 20px;
  --blin-speed: 0.8s;
  font-size: 2rem;
  font-weight: 800;
  color: var(--blin-color);
  animation: blin-enter var(--blin-speed) ease-out forwards;
}

@keyframes blin-enter {
  from { opacity: 0; filter: blur(var(--blin-amount)); transform: scale(1.1); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

<div class="blur-in">Blur In</div>

---

94. Rotate In

Spins in while fading — dramatic rotation entrance.

How It Works

The element starts at rotate(360deg) scale(0) — fully rotated and invisible. It simultaneously rotates back to 0 degrees and scales to full size. The combined rotation + scale creates a dynamic spinning entrance. The --ri-degrees parameter lets you control how many degrees of rotation.

.rotate-in {
  --ri-degrees: 360deg;
  --ri-speed: 0.8s;
  --ri-color: #a78bfa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: var(--ri-color);
  border-radius: 16px;
  color: white;
  font-weight: 700;
  animation: ri-enter var(--ri-speed) ease-out forwards;
}

@keyframes ri-enter {
  from { opacity: 0; transform: rotate(var(--ri-degrees)) scale(0); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

<div class="rotate-in">Spin</div>

---

95. Stagger Children

Children elements animate in sequence — list cascade entrance.

How It Works

Each child starts at opacity: 0; translateX(-20px) and animates to its visible state. The key is the staggered delay: calc(var(--stagger-delay) * N) where N is the child index (0, 1, 2, 3, 4). This creates the cascading sequence. The parent container uses flex-direction: column for a vertical list, but the same technique works with rows.

.stagger-children {
  --stagger-delay: 0.1s;
  --stagger-speed: 0.5s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stagger-item {
  --stagger-color: #4ade80;
  padding: 10px 20px;
  background: var(--stagger-color);
  border-radius: 8px;
  color: #064e3b;
  font-weight: 600;
  animation: stagger-in var(--stagger-speed) ease-out forwards;
  opacity: 0;
  transform: translateX(-20px);
}

.stagger-item:nth-child(1) { animation-delay: calc(var(--stagger-delay) * 0); }
.stagger-item:nth-child(2) { animation-delay: calc(var(--stagger-delay) * 1); }
.stagger-item:nth-child(3) { animation-delay: calc(var(--stagger-delay) * 2); }
.stagger-item:nth-child(4) { animation-delay: calc(var(--stagger-delay) * 3); }
.stagger-item:nth-child(5) { animation-delay: calc(var(--stagger-delay) * 4); }

@keyframes stagger-in {
  to { opacity: 1; transform: translateX(0); }
}

<div class="stagger-children">
  <div class="stagger-item">Item 1</div>
  <div class="stagger-item">Item 2</div>
  <div class="stagger-item">Item 3</div>
  <div class="stagger-item">Item 4</div>
  <div class="stagger-item">Item 5</div>
</div>

Tip: The calc(var(--stagger-delay) * N) pattern scales to any number of children. Use JavaScript to generate the nth-child rules dynamically for longer lists.

---

96. Clip Reveal

Element reveals using clip-path from center outward — geometric mask entrance.

How It Works

A clip-path: circle() starts at 0% (invisible) and expands to 100% (fully visible). The circle grows from 50% 50% (center). This creates a spotlight-style reveal. The ease-out timing makes the reveal fast at the start then gently completes.

.entrance-clip {
  --ecc-color: #3b82f6;
  --ecc-speed: 0.6s;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 10px;
  background: var(--ecc-color);
  color: #fff;
  font-weight: 600;
  animation: ecc-clip var(--ecc-speed) ease-out both;
}

@keyframes ecc-clip {
  0% { clip-path: circle(0% at 50% 50%); opacity: 0; }
  100% { clip-path: circle(100% at 50% 50%); opacity: 1; }
}

<div class="entrance-clip">Revealed</div>

Tip: Change the origin to 0% 50% to reveal from the left edge, or 50% 0% to reveal from the top.

---

97. Flip In

3D flip from back to front — card-like entrance with perspective.

How It Works

The element starts at rotateX(90deg) — flipped away from the viewer. It rotates through overshoot positions (-10deg at 40%, 5deg at 70%) before settling at 0. The transform-origin: center bottom makes it pivot from the bottom edge, like a card being flipped down from above.

.entrance-flip {
  --ef-color: #3b82f6;
  --ef-speed: 0.6s;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 10px;
  background: var(--ef-color);
  color: #fff;
  font-weight: 600;
  animation: ef-flip var(--ef-speed) ease-out both;
  transform-origin: center bottom;
  perspective: 400px;
}

@keyframes ef-flip {
  0% { transform: rotateX(90deg); opacity: 0; }
  40% { transform: rotateX(-10deg); }
  70% { transform: rotateX(5deg); }
  100% { transform: rotateX(0); opacity: 1; }
}

<div class="entrance-flip">Flip In</div>

---

98. Slide In

Slides in from the left with elastic overshoot — smooth directional entrance.

How It Works

The element starts at translateX(-40px) (off-screen left) with opacity: 0. The cubic-bezier(0.34, 1.56, 0.64, 1) curve provides the elastic overshoot — the element slides past its target then bounces back. This feels more dynamic than a simple linear slide.

.entrance-slide {
  --es-color: #8b5cf6;
  --es-speed: 0.5s;
  --es-distance: 40px;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 10px;
  background: var(--es-color);
  color: #fff;
  font-weight: 600;
  animation: es-slide var(--es-speed) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes es-slide {
  0% { transform: translateX(calc(-1 * var(--es-distance))); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

<div class="entrance-slide">Slide In</div>

Tip: Change translateX to translateY for a vertical slide, or negate the value to slide from the right.

---

99. Swing In

Swings in from above like a pendulum — playful with decaying rotation.

How It Works

The element pivots from transform-origin: top center. It starts at rotate(-30deg), swings to +20deg, then oscillates with decreasing amplitude (-12deg, +6deg, -2deg, 0). This mimics a pendulum losing energy. The decay pattern (30 → 20 → 12 → 6 → 2 → 0) follows a natural damping curve.

.entrance-swing {
  --esw-color: #06b6d4;
  --esw-speed: 0.8s;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 10px;
  background: var(--esw-color);
  color: #fff;
  font-weight: 600;
  animation: esw-swing var(--esw-speed) ease-out both;
  transform-origin: top center;
}

@keyframes esw-swing {
  0% { transform: rotate(-30deg); opacity: 0; }
  20% { transform: rotate(20deg); opacity: 1; }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(6deg); }
  80% { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}

<div class="entrance-swing">Swing</div>

---

100. Zoom In

Scale from zero with spring bounce — energetic and attention-grabbing.

How It Works

The simplest spring entrance — scale(0) to scale(1) with the elastic cubic-bezier(0.34, 1.56, 0.64, 1). The 1.56 overshoot in the curve makes the element briefly grow past 1.0 then snap back, creating the spring bounce. Combined with opacity: 0 to 1, this is a punchy, high-energy entrance.

.entrance-zoom {
  --ez-color: #f59e0b;
  --ez-speed: 0.5s;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 10px;
  background: var(--ez-color);
  color: #fff;
  font-weight: 600;
  animation: ez-zoom var(--ez-speed) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes ez-zoom {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

<div class="entrance-zoom">Zoom!</div>

---

101–110. More Entrances

Here are 10 more entrance animations, each with a unique character:

101. Roll In — Rolls in from the side with rotation (translateX(-100px) rotate(-180deg) → origin).

102. Bounce Down — Drops from above with multiple decreasing bounces (200px → 0 → -40px → 0 → -15px → 0 → -5px → 0).

103. Expand — Grows from center with shape morphing (border-radius: 50% → 12px as it expands).

104. Rotate In — Spins from -200deg with scale (0.5 → 1), overshoot via elastic bezier.

105. Blur In — Cinematic sharpen from blur(20px) + scale(1.1) to focus.

106. Spiral In — Corkscrew entrance combining rotate(-540deg), scale(0), and translate(50px, -50px).

107. Unfold — 3D paper unfold with rotateY(-90deg) → 0deg from left edge origin.

108. Slide Fade — Clean horizontal slide (translateX(-30px)) with opacity.

109. Swing Drop — Pendulum release with rotation settling (-45deg → +15deg → -8deg → +3deg → 0).

110. Mask Reveal — Circular clip-path expanding from center (spotlight effect).

All 20 entrance animations share these principles:

• forwards or both fill mode to hold the final state
• opacity: 0 in the initial state, fading to 1
• One-shot (not infinite) — they play once on entrance
• ease-out or elastic bezier for natural deceleration

Explore all 310 animations live at CSSKit or star the repo on GitHub.