OnomaUI

batabata motion

batabata has 2 kinds of motion.

ばたばた2 motionsOfficial

Motion by meaning

Flail arms and legs
Bustle around

Flail arms and legs

Tantrum / fuss

Bends 16° each way, wriggling side to side, forever.

Duration
0.5s
Repeats
Yes
Easing
ease-in-out
Animates
Rotation · Skew rotate skewY
Show CSS
@keyframes onoma-batabata {
  0% { transform: rotate(15deg) skewY(-16deg); }
  100% { transform: rotate(-15deg) skewY(16deg); }
}

.onoma-batabata {
  animation: onoma-batabata 0.5s ease-in-out infinite alternate both;
}

/* Reduced motion: no motion */
@media (prefers-reduced-motion: reduce) {
  .onoma-batabata { animation: none; }
}
Try with my objectUse the code

Bustle around

Busy / processing

Rattles 7% and 10° side to side, forever.

Duration
0.26s
Repeats
Yes
Easing
linear
Animates
Position · Rotation translate rotate
Show CSS
@keyframes onoma-batabata-2 {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  25% { transform: translate(7%, 0%) rotate(-10deg); }
  50% { transform: translate(0%, 0%) rotate(0deg); }
  75% { transform: translate(-7%, 0%) rotate(10deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.onoma-batabata-2 {
  animation: onoma-batabata-2 0.26s linear infinite both;
}

/* Reduced motion: no motion */
@media (prefers-reduced-motion: reduce) {
  .onoma-batabata-2 { animation: none; }
}
Try with my objectUse the code

Compare with similar motions

batabataFlail arms and legs
zunzunStride forward
pataFlop over