Swing

Quick implementation

.swing-icon {
  transform-origin: top center;
  animation: swing 2s ease-in-out infinite;
}

@keyframes swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(-5deg); }
}

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

Prompt this to your LLM

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

Create a CSS animation called "swing" that rotates an element like a pendulum.
Use @keyframes with the following rotation sequence: 0deg → 15deg → -10deg → 5deg → -5deg → 0deg.
Set the transform-origin to top center so it swings from a pivot point.
Use a timing function like ease-in-out for a natural feel.
Include a media query for prefers-reduced-motion to disable the animation.
Provide the CSS for both a class-based implementation and a @keyframes definition.

Why this matters in 2026

The swing animation brings a sense of weight and physics to UI elements, making static icons feel like they are hanging or swinging in space. This is particularly effective for notification badges, hanging menus, or decorative elements that need to feel organic rather than rigid. By using CSS keyframes, we ensure the motion is hardware-accelerated and performant across all modern browsers.

The logic

The animation relies on rotating the element around a pivot point defined by transform-origin: top center. The keyframes define a non-linear path of rotation, moving from a neutral position to a positive angle, then overshooting into a negative angle before settling back. This creates a "swing" effect where the element swings to the right, then to the left, mimicking a physical pendulum.

Accessibility & performance

We include a @media (prefers-reduced-motion: reduce) query to disable the animation for users who have requested reduced motion, ensuring the UI remains accessible and does not cause vestibular issues. The animation uses transform which is GPU-accelerated, ensuring smooth 60fps performance without triggering layout recalculations.