Rubber Band

Quick implementation

.rubber-band {
  animation: rubberBand 1.5s ease-in-out infinite;
}

@keyframes rubberBand {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

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

Prompt this to your LLM

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

Create a CSS animation named "rubberBand" that mimics a rubber band snapping back and forth.

Requirements:
1. Use @keyframes with transform: scale3d() to create the effect.
2. The animation should stretch horizontally then vertically, then oscillate slightly before settling.
3. Keyframes:
   - 0%: scale3d(1, 1, 1)
   - 30%: scale3d(1.25, 0.75, 1)
   - 40%: scale3d(0.75, 1.25, 1)
   - 50%: scale3d(1.15, 0.85, 1)
   - 65%: scale3d(0.95, 1.05, 1)
   - 75%: scale3d(1.05, 0.95, 1)
   - 100%: scale3d(1, 1, 1)
4. Apply a 1.5s duration with an "ease-in-out" timing function.
5. Include a media query for "prefers-reduced-motion" to disable the animation for accessibility.
6. Provide two variants: one as a standalone class and one as a Tailwind CSS utility class.

Why this matters in 2026

The rubber band effect is a classic example of non-linear animation that adds personality to UI elements without requiring JavaScript. In modern web design, these micro-interactions help guide user attention and provide tactile feedback, making interfaces feel more responsive and alive. As performance budgets tighten, using native CSS keyframes ensures these effects run smoothly on all devices.

The logic

This animation relies on scale3d() to manipulate the X and Y axes independently, creating the illusion of elasticity. By alternating between stretching wide and compressing tall, the element mimics the physical behavior of a rubber band under tension. The specific timing percentages are tuned to create a "snap" effect that settles naturally back to the original state.

Accessibility & performance

Always include the @media (prefers-reduced-motion: reduce) query to respect user preferences for reduced motion, which is critical for users with vestibular disorders. Because this animation uses transform and opacity (if added), it promotes GPU acceleration, ensuring 60fps performance even on lower-end devices without triggering expensive layout recalculations.