Try them live — All 30 effects are available on CSSKit where you can customize parameters and copy the code. Source code on GitHub. See also Attention Animations, Exit & Button Animations.

---

This post covers two component-level animation categories: 18 card animations (hover effects, 3D transforms, reveals) and 12 divider animations (animated section separators). Cards bring interactivity to content layouts, while dividers add polish between sections.

---

Part A: Card Animations (#159-176)

Card animations transform static content blocks into interactive, engaging components. Most use :hover triggers and transition for smooth state changes.

159. Card Flip 3D

The classic 3D card flip — hover to reveal the back face with perspective.

How It Works

Three pieces make this work: perspective: 800px on the parent creates 3D depth. transform-style: preserve-3d on the inner container keeps children in 3D space. Each face uses backface-visibility: hidden so only the visible face shows. The back face is pre-rotated rotateY(180deg) so it appears correctly when flipped.

.card-flip-3d {
  perspective: 800px;
  width: 220px;
  height: 140px;
}

.card-flip-3d-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease-in-out;
  transform-style: preserve-3d;
}

.card-flip-3d:hover .card-flip-3d-inner {
  transform: rotateY(180deg);
}

.card-flip-3d-front,
.card-flip-3d-back {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
}

.card-flip-3d-back {
  transform: rotateY(180deg);
}

<div class="card-flip-3d">
  <div class="card-flip-3d-inner">
    <div class="card-flip-3d-front">Hover me</div>
    <div class="card-flip-3d-back">Flipped!</div>
  </div>
</div>

Customize: --cf-speed (flip speed), --cf-radius (corner radius).

---

160. Card Stack

Stacked cards fan out on hover — gallery-style spread with depth layering.

How It Works

Three cards are absolutely positioned with slight offsets (6px, 12px top/left). On hover, each card moves in a different direction — left card slides left with -8deg rotation, center lifts up, right slides right with +8deg rotation. The cubic-bezier(0.34, 1.56, 0.64, 1) adds spring overshoot.

.card-stack-card {
  position: absolute;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-stack:hover .card-stack-card:nth-child(1) {
  transform: translateX(-40px) rotate(-8deg);
}

.card-stack:hover .card-stack-card:nth-child(3) {
  transform: translateX(40px) rotate(8deg);
}

<div class="card-stack">
  <div class="card-stack-card">Card 1</div>
  <div class="card-stack-card">Card 2</div>
  <div class="card-stack-card">Card 3</div>
</div>

---

161. Card Glass

Glassmorphism with hover lift, glow border, and backdrop blur.

How It Works

backdrop-filter: blur(16px) creates the frosted glass effect over whatever is behind the card. A ::before pseudo-element uses mask-composite: exclude to create a gradient border that appears on hover. The combination of lift (translateY(-6px)) and glow shadow creates a premium floating feel.

.card-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.35s ease;
}

.card-glass:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px -8px rgba(6, 182, 212, 0.25);
}

<div class="card-glass">
  <div class="card-glass-title">Glass Card</div>
  <div class="card-glass-desc">Hover for lift and glow</div>
</div>

Customize: --cg-accent (glow color), --cg-speed (transition speed).

---

162. Card Expand

Card expands vertically on hover — accordion-style reveal for compact layouts.

How It Works

The hidden body starts with max-height: 0 and overflow: hidden. On hover, max-height transitions to 120px — the element smoothly expands to fit. The chevron icon rotates 180deg (transform: rotate(180deg)) to indicate the expanded state. This is the CSS-only approach to accordions.

.card-expand-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.card-expand:hover .card-expand-body {
  max-height: 120px;
}

.card-expand:hover .card-expand-header svg {
  transform: rotate(180deg);
}

<div class="card-expand">
  <div class="card-expand-header">Details ▾</div>
  <div class="card-expand-body">
    <div class="card-expand-body-inner">Hidden content here</div>
  </div>
</div>

---

163. Card Spotlight

Mouse-following radial gradient spotlight — premium interactive card.

How It Works

A ::before pseudo-element creates a radial gradient positioned at CSS custom properties --cs-x and --cs-y. A tiny onmousemove handler on the element updates these variables with the cursor position. The gradient follows the mouse, creating the spotlight effect. The pointer-events: none on the overlay ensures clicks pass through.

.card-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--cs-x, 50%) var(--cs-y, 50%),
    rgba(59, 130, 246, 0.12),
    transparent 60%
  );
  pointer-events: none;
}

<div class="card-spotlight"
  onmousemove="this.style.setProperty('--cs-x',(event.offsetX)+'px');this.style.setProperty('--cs-y',(event.offsetY)+'px')">
  ...
</div>

---

164–176. More Card Animations

164. Card Shuffle — Three stacked cards swap positions and z-index on hover. Unlike the stack fan, cards rearrange their depth order: the front card moves left with rotation, middle lifts up and scales, right card moves right.

165. Card Border Glow — Rotating conic gradient border using ::before and ::after pseudo-elements. The outer pseudo creates a spinning conic-gradient, while the inner covers the card background. Uses @keyframes border-spin rotating 0→360deg continuously.

.card-border-glow::before {
  background: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #3b82f6);
  animation: border-spin 3s linear infinite;
}
@keyframes border-spin {
  to { transform: rotate(360deg); }
}

166. Card Tilt — 3D perspective tilt on hover using rotateY and rotateX together. perspective: 600px on parent, combined tilt creates a diagonal lean effect with enhanced box-shadow for depth.

167. Card Reveal — Content hidden behind a sliding cover. The cover uses translateY(-100%) on hover to slide up and reveal content underneath. Simple but effective for teaser content.

168. Hover Lift — Classic card lift with translateY(-8px) and enhanced shadow. The shadow goes from 0 2px 8px (resting) to 0 12px 24px (lifted), simulating elevation. border-top: 3px solid adds an accent stripe.

169. Color Shift — Background gradient animates position on hover. background-size: 200% 200% with background-position shifting from 0% 50% to 100% 50% creates a smooth color transition effect.

170. Horizontal Flip — Same as Card Flip 3D but with cleaner structure. Uses perspective: 600px, rotateY(180deg), and backface-visibility: hidden on front/back faces.

171. Frosted Glass — Glassmorphism card where backdrop-filter: blur() transitions from 0px to 12px on hover. The background opacity and border color also shift, creating a progressive glass reveal.

172. Stack Fan — Playing card spread effect. Three colored cards (red, blue, green) fan out on hover with different offsets and rotations. Simpler than the main stack animation.

173. Parallax — Inner layers move at different speeds on hover. The background layer shifts right/down (translate(5px, 5px) scale(1.05)) while text shifts left/up (translate(-3px, -3px)), creating depth through differential motion.

174. Vertical Flip — Same concept as horizontal flip but uses rotateX(180deg) instead of rotateY. The card flips forward/backward like a calendar page.

175. Glow Hover — Soft neon glow appears on hover via animated box-shadow. Uses dual shadows: 0 0 20px (close glow) and 0 0 40px (far glow) for layered depth.

176. Content Slide — Inner content slides up to reveal hidden content below. The top layer uses translateY(-100%) on hover, sliding completely off to expose the bottom layer. Like a vertical curtain reveal.

Card animation patterns:

• perspective on the parent enables 3D transforms on children
• transform-style: preserve-3d keeps children in 3D space
• backface-visibility: hidden hides the back of rotated elements
• max-height transitions for expand/collapse (use a reasonable max value)
• cubic-bezier(0.34, 1.56, 0.64, 1) for spring overshoot on interactions

---

Part B: Divider Animations (#177-188)

Divider animations add visual polish between sections — animated lines, waves, dots, and patterns that draw the eye.

177. Draw Line

Horizontal line draws itself from left to right — clean and minimal.

How It Works

A ::after pseudo-element fills the full width with color. It starts at scaleX(0) with transform-origin: left and animates to scaleX(1). The forwards fill mode keeps the line visible after the animation completes.

.divider-draw::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dd-color);
  animation: dd-draw 1s ease-out forwards;
  transform-origin: left;
}

@keyframes dd-draw {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

<div class="divider-draw"></div>

Customize: --dd-color (line color), --dd-thickness (height), --dd-speed (draw speed).

---

178. Glow Line

Pulsing neon glow line — perfect for dark UIs.

How It Works

A simple 2px line with box-shadow animation. The shadow pulses between a subtle 4px glow and an intense triple-layer glow (10px + 20px + 40px). The alternate direction creates a smooth breathing effect. Opacity shifts from 0.4 to 1.0.

.divider-glow {
  width: 240px;
  height: 2px;
  background: var(--dg-color);
  animation: dg-glow 2s ease-in-out infinite alternate;
}

@keyframes dg-glow {
  0% { opacity: 0.4; box-shadow: 0 0 4px var(--dg-color); }
  100% { opacity: 1; box-shadow: 0 0 10px var(--dg-color), 0 0 20px var(--dg-color), 0 0 40px rgba(6, 182, 212, 0.3); }
}

<div class="divider-glow"></div>

---

179. Wave Divider

Animated SVG wave that flows continuously — organic section separator.

How It Works

An SVG with width: 200% is placed inside a container. The SVG translateX animates from 0 to -50%, creating a seamless loop. The Q (quadratic Bezier) and T (smooth continuation) commands in the SVG path create smooth wave peaks. The 200% width ensures the pattern repeats seamlessly when half scrolls off.

.divider-wave svg {
  width: 200%;
  height: 40px;
  animation: dw-flow 3s linear infinite;
}

@keyframes dw-flow {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

<div class="divider-wave">
  <svg viewBox="0 0 1200 40" preserveAspectRatio="none">
    <path d="M0,20 Q150,0 300,20 T600,20 T900,20 T1200,20"/>
  </svg>
</div>

---

180–188. More Divider Animations

180. Dot March — Five dots bounce in sequence with staggered animation-delay (0s, 0.15s, 0.3s, 0.45s, 0.6s). Each dot bounces up 6px and brightens from 0.3 to 1.0 opacity. Classic loading-style divider.

181. Gradient Slide — A 3px line with background-size: 200% and a tri-color gradient that slides continuously. background-position animates from 0% 50% to 200% 50% creating a flowing color bar.

182. Pulse Line — Static line with a pulsing circle expanding from center. The ::after element scales from 0.15 to 1.0 while fading to 0, creating a radio-wave effect radiating outward.

183. Icon Divider — Centered icon (✦) between two gradient lines. The icon rotates 360deg and pulses between 1.0× and 1.2× scale. The gradient lines fade from transparent to color at the center.

184. Zigzag — SVG zigzag pattern that slides left continuously. Same technique as the wave divider: width: 200% SVG with translateX(-50%) animation. Sharp angles create a dynamic, modern feel.

185. Diagonal Slide — Uses repeating-linear-gradient(-45deg) to create diagonal stripes. The ::before pseudo-element slides via translateX(50%), making the stripes appear to move diagonally. Modern, minimal.

.divider-diagonal::before {
  background: repeating-linear-gradient(
    -45deg,
    var(--ddl-color),
    var(--ddl-color) 10px,
    transparent 10px,
    transparent 20px
  );
  animation: ddl-slide 3s linear infinite;
}

186. Breathe Line — A line that expands and contracts in width (80px → 200px → 80px) with synchronized opacity. The margin: 0 auto keeps it centered. Calm, meditative feel.

187. Chevron — Five chevron arrows (created with rotated border-right + border-bottom) move forward in sequence. Staggered delays create a cascading arrow flow pointing right.

188. Fade Edges — Line with gradient edges fading to transparent. Uses linear-gradient(90deg, transparent, color, transparent) combined with a scale-in animation. Elegant, minimal.

Divider animation patterns:

• transform-origin controls draw direction (left = L→R, right = R→L, center = outward)
• width: 200% + translateX(-50%) for seamless SVG loops
• Staggered animation-delay for sequential effects (dots, chevrons)
• box-shadow layering for glow effects (close + medium + far)
• background-size: 200% for sliding gradients

---

What’s Next?

That covers all 18 card animations and 12 divider effects from CSSKit. In the next post, we enter the world of CSS pixel art — building game sprites using only CSS box-shadow.

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