Tada

A playful scale-and-rotate attention grabber using @keyframes.

Widely Supported

animationno-js

Quick implementation

@keyframes tada {
  0%   { transform: scale(1) rotate(0deg); }
  10%  { transform: scale(0.95) rotate(-3deg); }
  20%  { transform: scale(1.1) rotate(3deg); }
  30%  { transform: scale(1.1) rotate(-3deg); }
  40%  { transform: scale(1.1) rotate(3deg); }
  50%  { transform: scale(1.1) rotate(-3deg); }
  60%  { transform: scale(1.1) rotate(3deg); }
  70%  { transform: scale(1.1) rotate(-3deg); }
  80%  { transform: scale(1.1) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.tada {
  animation: tada 1s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tada { 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 tada attention-seeking animation using @keyframes — no JavaScript.

Technical constraints:
- Combine scale() and rotate() in a single transform for a playful wiggle effect.
- Scale up to roughly 1.1 with small alternating rotations of ±3deg.
- Use ease or a custom cubic-bezier for smooth acceleration and deceleration.
- 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 duration and iterationCount as optional props.

Edge cases to handle:
- Element must not shift surrounding content (use transform only).
- Works on inline elements by setting display: inline-block.
- Provide a one-shot variant using animation-iteration-count: 1 with animation-fill-mode: both.
- Handle stacking context — the scaled element should not clip inside overflow: hidden parents.

Return CSS.

Why this matters in 2026

Tada is the go-to attention-seeking animation for CTAs, success states, and gamification cues. Unlike simple scale or fade effects, the combined scale-and-rotate wiggle reads as celebratory and playful — perfect for reward moments. A pure-CSS implementation means zero runtime cost and no dependency on animation libraries that ship kilobytes of JavaScript.

The logic

The keyframes start with a subtle scale-down to 0.95 at 10%, creating a brief windup before the element pops to scale(1.1). From 20% to 70% the element holds that enlarged scale while alternating between rotate(3deg) and rotate(-3deg), producing the signature wiggle. By 80% the rotation settles to 0deg and the scale eases back to 1, giving the animation a clean landing without an abrupt stop.

Accessibility & performance

@media (prefers-reduced-motion: reduce) completely disables the tada for users with vestibular sensitivities who may find the rotation disorienting. Both scale() and rotate() are compositor-friendly transforms — the browser composites them on the GPU without triggering layout or paint, so the animation holds a smooth 60fps. For one-shot use (e.g., a success checkmark appearing), pair animation-iteration-count: 1 with animation-fill-mode: both to freeze on the final frame.