Bounce

A smooth bouncing animation using @keyframes and cubic-bezier.

Widely Supported

animationno-js

Quick implementation

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5rem); }
}

.bounce {
  animation: bounce 0.6s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bounce { animation: none; }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a CSS animation library.

Goal: A reusable bounce animation using @keyframes — no JavaScript.

Technical constraints:
- Use translateY for the bounce — compositor-only, no layout shift.
- Use cubic-bezier(0.28, 0.84, 0.42, 1) for a natural deceleration at the top.
- Animation should loop infinitely by default.
- Use oklch() for any demo colors, not hex or rgba().
- Include @media (prefers-reduced-motion: reduce) to disable the animation.

Framework variant (pick one):
A) Vanilla CSS class that can be applied to any element.
B) React component — accept amplitude and duration as optional props.

Edge cases to handle:
- Element must not shift surrounding content (use transform, not margin/top).
- Works on inline and block elements alike.
- Provide a one-shot variant using animation-iteration-count: 1.

Return CSS.

Why this matters in 2026

Bounce is the most recognizable attention-seeking animation — used for notification badges, scroll-down arrows, and onboarding cues. A well-tuned CSS bounce with proper easing feels natural without JavaScript animation libraries.

The logic

The keyframes move the element up with translateY(-1.5rem) at the midpoint and back to 0. The cubic-bezier(0.28, 0.84, 0.42, 1) easing creates a natural deceleration at the top of the bounce, mimicking real-world physics. Using transform instead of top or margin keeps the animation on the GPU compositor, avoiding layout recalculations.

Accessibility & performance

@media (prefers-reduced-motion: reduce) disables the bounce for users with vestibular disorders. transform is compositor-friendly — the animation runs at 60fps without triggering layout or paint. For a one-shot bounce (e.g., on first appearance), use animation-iteration-count: 1 with animation-fill-mode: both.