OnomaUI

yoroyoro motion

The motion for "totter and reel".

よろよろ1 motionOfficial

Sample

Totter and reel

An unstable connection

Staggers 14% side to side, tipping on its base, forever.

Duration
2.4s
Repeats
Yes
Easing
ease-in-out
Animates
Position · Rotation translate rotate
Show CSS
@keyframes onoma-yoroyoro {
  0% { transform: translate(-14%, 0%) rotate(-12deg); }
  30% { transform: translate(5.6%, 0%) rotate(9.6deg); }
  50% { transform: translate(-4.2%, 0%) rotate(-6deg); }
  80% { transform: translate(14%, 0%) rotate(12deg); }
  100% { transform: translate(-14%, 0%) rotate(-12deg); }
}

.onoma-yoroyoro {
  animation: onoma-yoroyoro 2.4s ease-in-out infinite both;
  transform-origin: 50% 100%;
}

/* Reduced motion: no motion */
@media (prefers-reduced-motion: reduce) {
  .onoma-yoroyoro { animation: none; }
}

Compare with similar motions