Try them live — All 32 effects are available on CSSKit where you can customize parameters and copy the code. Source code on GitHub. See also Entrance Animations, Background Part 2.

---

This post covers two animation categories: 14 exit animations (how elements leave the screen) and 18 button animations (interactive click/hover feedback). Every animation is pure CSS with customizable properties.

---

Part A: Exit Animations (#111-124)

Exit animations are the reverse of entrances — elements go from visible to invisible. They use ease-in timing (accelerating out) and forwards fill mode to hold the hidden state. Perfect for dismissing notifications, removing list items, or closing modals.

111. Fade Down

Fade out while sliding down — the standard dismiss animation.

How It Works

The reverse of fade-slide-up: opacity goes from 1 to 0 while translateY moves from 0 to 20px. The ease-in timing accelerates the element downward as it disappears — matching gravity’s pull.

.exit-fade-down {
  --efd-color: #3b82f6;
  --efd-speed: 0.4s;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 10px;
  background: var(--efd-color);
  color: #fff;
  font-weight: 600;
  animation: efd-out var(--efd-speed) ease-in forwards;
}

@keyframes efd-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); }
}

<div class="exit-fade-down">Dismissing...</div>

---

112. Slide Out

Slides out to the right with fade — directional list item dismissal.

How It Works

translateX(0) to translateX(60px) with simultaneous opacity fade. The horizontal movement makes it clear which direction the element is leaving — perfect for swipe-to-dismiss patterns. The 60px distance is enough to create visible motion without going off-screen (which would be invisible).

.exit-slide-out {
  --eso-color: #f59e0b;
  --eso-speed: 0.4s;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 10px;
  background: var(--eso-color);
  color: #fff;
  font-weight: 600;
  animation: eso-out var(--eso-speed) ease-in forwards;
}

@keyframes eso-out {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(60px); opacity: 0; }
}

<div class="exit-slide-out">Sliding...</div>

---

113. Zoom Out

Scale up and fade out — expanding dissolution.

How It Works

scale(1) to scale(1.5) while fading — the element grows larger and more transparent simultaneously, creating a “dissolving into air” effect. The inverse of the zoom-in entrance.

@keyframes ezo-out {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

<div class="exit-zoom-out">Zooming...</div>

---

114–124. More Exit Animations

114. Rotate Out — Spins while fading (rotate(200deg) scale(0.5)).

115. Flip Out — 3D flip to back (rotateX(90deg) with transform-origin: top).

116. Scale Down — Shrinks to nothing quickly (fast 0.3s default).

117. Blur Out — Cinematic blur-out with scale up (reverse of blur-in).

118. Bounce Out — Bounces once then shoots upward and disappears.

119. Roll Out — Rolls to the right with 360deg spin.

120. Spiral Out — Corkscrew departure (rotate 540deg + scale 0 + translate).

121. Slide Fade Out — Clean horizontal exit (translateX(40px) + fade).

122. Dissolve — Ethereal blur + scale 1.2 dissolution.

123. Fold — 3D paper fold (rotateY(90deg) from right edge origin).

124. Shrink — Shrinks to a point with border-radius morphing (12px → 50%).

All exit animations share these principles:

• ease-in timing (accelerating away)
• forwards fill mode (hold hidden state)
• opacity: 0 at the end state

---

Part B: Button Animations (#125-142)

Button animations add interactive feedback — click responses, hover effects, and attention-grabbing pulses. These transform static buttons into engaging CTAs.

125. Ripple Click

Material-design ripple on click — the gold standard for button feedback.

How It Works

A ::after pseudo-element starts as a 0px circle at center. On :active, it instantly expands to 300px with transition: 0s. When released, it transitions back with the 0.6s ease. This creates the expanding ripple effect. The overflow: hidden clips the ripple to the button bounds.

.ripple-click {
  --rc-color: rgba(255, 255, 255, 0.4);
  --rc-bg: #2563eb;
  position: relative;
  display: inline-block;
  padding: 14px 36px;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: var(--rc-bg);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}

.ripple-click::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: var(--rc-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
}

.ripple-click:active::after {
  width: 300px; height: 300px;
  opacity: 1;
  transition: 0s;
}

<button class="ripple-click">Click Me</button>

---

126. Bounce Press

Button bounces down on press — satisfying spring feedback.

How It Works

On :active, the button scales to scale(0.92) (8% smaller). The cubic-bezier(0.34, 1.56, 0.64, 1) adds spring overshoot on release — the button briefly grows past 1.0 before settling. The fast 0.15s duration makes it feel snappy and responsive.

.bounce-press {
  --bp-color: #f43f5e;
  --bp-scale: 0.92;
  --bp-speed: 0.15s;
  display: inline-block;
  padding: 14px 36px;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: var(--bp-color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform var(--bp-speed) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bounce-press:active { transform: scale(var(--bp-scale)); }

<button class="bounce-press">Press Me</button>

---

127. Gradient Border

Animated gradient border rotating around the button — uses CSS @property.

How It Works

This uses the CSS @property feature to animate a custom property --gb-angle from 0deg to 360deg. The gradient uses this variable as its angle, creating a rotating gradient border. ::before is the gradient layer extending 2px beyond the button; ::after covers the inside with the button background. The @property declaration tells CSS that --gb-angle is an <angle> type, enabling smooth interpolation.

@property --gb-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: linear-gradient(
    var(--gb-angle, 0deg),
    var(--gb-color-1), var(--gb-color-2), var(--gb-color-3), var(--gb-color-1)
  );
  z-index: -2;
  animation: gb-rotate var(--gb-speed) linear infinite;
}

@keyframes gb-rotate { to { --gb-angle: 360deg; } }

<button class="gradient-border">Gradient Border</button>

Note: @property is required for animating custom properties. Without it, CSS can’t interpolate --gb-angle smoothly.

---

128–142. More Button Effects

128. Magnetic Hover — Button follows cursor with JS-tracked --mx/--my CSS vars.

129. Fill Slide — Background slides in from left via scaleX(0→1).

130. Button Glow — Pulsing neon box-shadow glow on hover.

131. Button Shine — Light streak sweeps across on hover (one-shot animation).

132. Button Swap — Text slides up, new text slides in from below.

133. Border Fill — Border draws, then ::before fills left-to-right.

134. Slide Icon — Arrow slides in from hidden position on hover.

135. Under Line — Underline draws from right-to-left via transform-origin swap.

136. Double Border — Two borders expand outward with staggered scale.

137. Morph — Shape morphs from pill (border-radius: 25px) to rectangle (8px).

138. Liquid Fill — ::before grows from height: 0 to height: 100% from bottom.

139. Chrome — Metallic reflection streak sweeps across on hover.

140. Ripple Fill — Circle expands from center to fill the button.

141. Text Loop — Animated text cycling through words (uses CSS content animation).

142. Pulse Button — Gentle idle pulse with expanding shadow ring to attract attention.

Button animation patterns to remember:

• :active for press feedback (instant response)
• :hover for engagement feedback (preview state)
• overflow: hidden to clip fills/ripples to button bounds
• z-index: -1 on ::before to keep text above fills
• cubic-bezier(0.34, 1.56, 0.64, 1) for spring overshoot

---

What’s Next?

That covers all 14 exit animations and 18 button effects from CSSKit. In the next post, we’ll tackle card and divider animations — component-level effects for UI cards and visual section dividers.

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