CSS Attention Animations — 16 Effects with Code

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

---

Attention animations grab the user’s focus — they make elements wiggle, bounce, glow, and pulse to signal importance. Unlike entrance/exit animations (which play once), attention effects are often infinite loops that keep drawing the eye until the user interacts. Perfect for notifications, alerts, CTAs, error states, and living indicators.

---

143. Shake

Horizontal shake with slight rotation — the classic “nope” feedback for errors and validation.

How It Works

translateX oscillates between positive and negative values (8px → 6px → 4px → 2px → 1px) with decreasing amplitude, like a spring settling. Each step adds a tiny rotate (±1deg) for organic feel. The ease-in-out timing keeps it smooth.

.attention-shake {
  --sh-color: #ef4444;
  --sh-duration: 0.6s;
  display: inline-block;
  padding: 12px 28px;
  border-radius: 10px;
  background: var(--sh-color);
  color: #fff;
  font-weight: 600;
  animation: shake var(--sh-duration) ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-8px) rotate(-1deg); }
  20% { transform: translateX(8px) rotate(1deg); }
  30% { transform: translateX(-6px) rotate(-0.5deg); }
  40% { transform: translateX(6px) rotate(0.5deg); }
  50% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  90% { transform: translateX(-1px); }
}

<div class="attention-shake">Action Required</div>

Customize: --sh-color (background), --sh-duration (speed).

---

144. Pulse Glow

Soft pulsing glow with a dot indicator — ideal for notification badges and status indicators.

How It Works

Two animations work in tandem: the ::before dot pulses its box-shadow from 0 0 0 0 to 0 0 12px 4px creating a soft glow ring, while the background rgba opacity shifts from 0.1 to 0.18. The infinite loop creates a gentle “breathing” glow effect.

.attention-pulse-glow {
  --pg-color: #3b82f6;
  --pg-speed: 2s;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 500;
  animation: pulse-glow-bg var(--pg-speed) ease-in-out infinite;
}

.attention-pulse-glow::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pg-color);
  animation: pulse-glow-dot var(--pg-speed) ease-in-out infinite;
}

@keyframes pulse-glow-dot {
  0%, 100% { box-shadow: 0 0 0 0 var(--pg-color); opacity: 1; }
  50% { box-shadow: 0 0 12px 4px var(--pg-color); opacity: 0.8; }
}

@keyframes pulse-glow-bg {
  0%, 100% { background: rgba(59, 130, 246, 0.1); }
  50% { background: rgba(59, 130, 246, 0.18); border-color: rgba(59, 130, 246, 0.5); }
}

<div class="attention-pulse-glow">New message</div>

Customize: --pg-color (glow color), --pg-speed (pulse speed).

---

145. Rubber Band

Elastic stretch effect — the element squashes and stretches like a rubber band snapping back.

How It Works

scaleX and scaleY alternate inversely — when X stretches to 1.15, Y compresses to 0.85, and vice versa. This creates the classic “rubber band” illusion of elastic deformation. The cubic-bezier(0.36, 0.07, 0.19, 0.97) adds a slight wobble overshoot.

.attention-rubber {
  --rb-color: #8b5cf6;
  --rb-duration: 0.8s;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 12px;
  background: var(--rb-color);
  color: #fff;
  font-weight: 700;
  animation: rubber var(--rb-duration) cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes rubber {
  0% { transform: scale(1, 1); }
  15% { transform: scale(1.15, 0.85); }
  25% { transform: scale(0.9, 1.1); }
  35% { transform: scale(1.08, 0.92); }
  45% { transform: scale(0.96, 1.04); }
  55% { transform: scale(1.03, 0.97); }
  65% { transform: scale(0.99, 1.01); }
  75% { transform: scale(1.01, 0.99); }
  100% { transform: scale(1, 1); }
}

<div class="attention-rubber">Boing!</div>

Customize: --rb-color (background), --rb-duration (speed).

---

146. Bounce

Vertical bounce with squash and stretch — a playful bounce that deforms on impact like a rubber ball.

How It Works

The element bounces up to --ab-height (30px default), then squashes on landing (scaleX(1.1) scaleY(0.9)) — the classic animation principle of squash-and-stretch. Each subsequent bounce is smaller (30px → 10px → ~4px) until it settles.

.attention-bounce {
  --ab-color: #f59e0b;
  --ab-speed: 0.6s;
  --ab-height: 30px;
  display: inline-block;
  padding: 12px 28px;
  border-radius: 10px;
  background: var(--ab-color);
  color: #fff;
  font-weight: 600;
  animation: bounce-y var(--ab-speed) cubic-bezier(0.36, 0.07, 0.19, 0.97);
  transform-origin: center bottom;
}

@keyframes bounce-y {
  0% { transform: translateY(0); }
  15% { transform: translateY(calc(-1 * var(--ab-height))) scaleX(0.9) scaleY(1.1); }
  30% { transform: translateY(0) scaleX(1.1) scaleY(0.9); }
  45% { transform: translateY(calc(-1 * var(--ab-height) / 3)) scaleX(0.95) scaleY(1.05); }
  60% { transform: translateY(0) scaleX(1.05) scaleY(0.95); }
  75% { transform: translateY(calc(-1 * var(--ab-height) / 8)); }
  100% { transform: translateY(0); }
}

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

Customize: --ab-color (background), --ab-speed (timing), --ab-height (bounce height).

---

147–158. More Attention Animations

147. Flash — Rapid opacity flicker (1 → 0.1 → 1 → 0.2 → 0.9). Simple but effective for drawing immediate attention to status changes. Uses opacity keyframes only — the lightest possible attention animation.

@keyframes flash-op {
  0%, 100% { opacity: 1; }
  20% { opacity: 0.1; }
  40% { opacity: 1; }
  60% { opacity: 0.2; }
  80% { opacity: 0.9; }
}

148. Heartbeat — Double-pulse scale rhythm mimicking a real heartbeat. The icon scales to 1.3× twice in quick succession (at 14% and 42%), then rests. Perfect for health apps, favorites, or “living” indicators.

149. Jello — Alternating skewX/skewY wobble that makes the element wobble like gelatin. Goes from skewX(-10deg) through diminishing oscillations back to 0deg. Fun, organic feel.

150. Swing — Pendulum rotation from a top pivot (transform-origin: top center). Rotates 15deg → -12deg → 9deg → -6deg → 3deg → 0, like a bell ringing.

151. Pulse Border — An expanding border ring using ::after with inset animation. The border starts at -2px and expands to -16px while fading to 0 opacity. Creates a radar-like pulsing outline.

.attention-pulse-border::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--apb-color);
  border-radius: 14px;
  animation: apb-ring 2s ease-out infinite;
}
@keyframes apb-ring {
  0% { inset: -2px; opacity: 1; }
  100% { inset: -16px; opacity: 0; }
}

152. Wiggle — Fast ±8deg rotation oscillation at 0.5s. A quick, playful shake that’s less aggressive than the full shake — more like a “hey, notice me!”

153. Breathe — Smooth scale oscillation (0.85 → 1.0) with a pulsing box-shadow. The 3s duration makes it feel calm and meditative. Ideal for meditation apps or subtle UI indicators.

154. Radar Ping — Concentric rings expand from center using ::before and ::after with staggered delays. The second ring starts at calc(speed / 2) delay, creating a continuous radar sweep effect.

155. Glow Text — Text text-shadow pulses from a single 4px glow to triple-layered shadow (10px + 20px + 40px). The alternate direction creates a smooth in-out glow cycle. Neon sign effect.

@keyframes agt-glow {
  0% { text-shadow: 0 0 4px var(--agt-color); opacity: 0.8; }
  100% { text-shadow: 0 0 10px var(--agt-color), 0 0 20px var(--agt-color), 0 0 40px var(--agt-color); opacity: 1; }
}

156. Magnet — Small jittery translate movements (2px, -1px, etc.) that make the element look like it’s being pulled by a magnetic force. The 0.4s alternate creates constant micro-movement.

157. Swing Bounce — Combines pendulum swing with damping. Rotates 15deg → -12deg → 8deg → -5deg → 2deg → -1deg → 0deg from transform-origin: top center. Like a swinging sign coming to rest.

158. Color Flash — Alternates between two background colors using step-end timing function for hard-cut color switching (no smooth transition). Bold and impossible to miss.

@keyframes acf-flash {
  0%, 100% { background: var(--acf-color1); }
  50% { background: var(--acf-color2); }
}

---

Attention Animation Patterns

When choosing attention animations, match the motion to the message:

Animation	Best For	Duration
Shake	Error states, validation failures	0.5–0.8s, one-shot
Pulse Glow	Notifications, badges	1.5–3s, infinite
Rubber Band	Fun feedback, gamification	0.6–1s, one-shot
Bounce	CTAs, playful interactions	0.5–0.8s, one-shot
Flash	Status changes, alerts	0.3–0.5s, one-shot
Heartbeat	Health UIs, favorites	1–2s, infinite
Breathe	Calm indicators, meditation	2–4s, infinite
Radar Ping	Location indicators, live status	1–2s, infinite
Color Flash	Critical alerts, urgent warnings	0.5–1s, infinite

Key principles:

• One-shot animations (shake, rubber, bounce, jello, swing) play once — use for triggered feedback
• Infinite animations (pulse glow, heartbeat, breathe, radar) loop continuously — use for persistent indicators
• transform-origin changes the feel: top center = pendulum, center bottom = bounce, center = elastic
• Respect prefers-reduced-motion — always provide a fallback for accessibility

---

What’s Next?

That covers all 16 attention animations from CSSKit. In the next post, we’ll tackle card and divider animations — component-level effects for UI cards, hover interactions, and visual section dividers.

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