OnomaUI

bunbun motion

bunbun has 2 kinds of motion.

ぶんぶん2 motionsOfficial

Motion by meaning

Swing round and round
Shake head hard

Swing round and round

Fast spinning loader

Spins 2 turn(s) in place, repeating.

Duration
0.58s
Repeats
Yes
Easing
cubic-bezier(.45,0,.55,1)
Animates
Rotation rotate
Show CSS
@keyframes onoma-bunbun {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}

.onoma-bunbun {
  animation: onoma-bunbun 0.58s cubic-bezier(.45,0,.55,1) infinite both;
}

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

Shake head hard

Refuse / no no

Wiggles 5 time(s), up to 28°, then settles.

Duration
0.8s
Repeats
No
Easing
ease-in-out
Animates
Rotation rotate
Show CSS
@keyframes onoma-bunbun-2 {
  0% { transform: rotate(0deg); }
  9.09% { transform: rotate(28deg); }
  18.18% { transform: rotate(-25.2deg); }
  27.27% { transform: rotate(22.4deg); }
  36.36% { transform: rotate(-19.6deg); }
  45.45% { transform: rotate(16.8deg); }
  54.55% { transform: rotate(-14deg); }
  63.64% { transform: rotate(11.2deg); }
  72.73% { transform: rotate(-8.4deg); }
  81.82% { transform: rotate(5.6deg); }
  90.91% { transform: rotate(-2.8deg); }
  100% { transform: rotate(0deg); }
}

.onoma-bunbun-2 {
  animation: onoma-bunbun-2 0.8s ease-in-out both;
}

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

Compare with similar motions

bunbunSwing round and round
denPlonk down firmly
bakuTake a big bite