OnomaUI

gabugabu motion

The motion for "guzzle".

がぶがぶ1 motionOfficial

Sample

Guzzle

Take in a lot at once

Squishes 18% wide, then tall, back and forth, forever.

Duration
0.7s
Repeats
Yes
Easing
ease-in-out
Animates
Scale scale
Show CSS
@keyframes onoma-gabugabu {
  0% { transform: scale(1.18, 0.82); }
  100% { transform: scale(0.82, 1.18); }
}

.onoma-gabugabu {
  animation: onoma-gabugabu 0.7s ease-in-out infinite alternate both;
}

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

Compare with similar motions