Wobble

Quick implementation

.wobble-demo {
  display: inline-block;
  cursor: pointer;
}

.wobble-demo:hover {
  animation: wobble 0.5s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

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

Prompt this to your LLM

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

Act as a senior CSS developer. Create a "Wobble" animation effect for a UI element (like a button).

Requirements:
1. Use CSS @keyframes to rotate the element left and right.
2. The animation should trigger on :hover.
3. Use the transform: rotate() property.
4. Include a @media (prefers-reduced-motion: reduce) query to disable the animation for users who prefer reduced motion.
5. Provide two versions:
   - Vanilla CSS using standard keyframes.
   - Tailwind CSS using arbitrary values or a custom config extension.
6. Ensure the animation is smooth (ease-in-out) and loops infinitely while hovering.
7. Use oklch() for any colors if you add styling.

Why this matters in 2026

Micro-interactions are essential for modern UI, providing immediate feedback to user actions. The wobble effect is a playful, attention-grabbing alternative to standard hover states. It signals "clickability" or "error" without being aggressive, making it perfect for gamified interfaces or friendly onboarding flows.

The logic

The core of this effect relies on the transform property. By using rotate() within @keyframes, we oscillate the element between negative and positive degrees (e.g., -5deg to 5deg). The ease-in-out timing function ensures the rotation starts and stops smoothly, preventing jarring visual jumps. We apply this animation to the :hover state so it only activates when the user interacts with the element.

Accessibility & performance

Rotation animations are generally performant because they utilize the GPU via the transform property, avoiding layout thrashing. However, motion can be disorienting for some users. It is critical to include the @media (prefers-reduced-motion: reduce) query. This media query detects if the user has requested less motion in their OS settings and disables the animation, replacing it with a static state or a simple transition.