OnomaUI

pero motion

pero has 2 kinds of motion.

ぺろっ2 motionsOfficial

Motion by meaning

Stick out tongue
Polish it off

Stick out tongue

Playful oops

Pops up 12%, holds, then ducks back.

Duration
0.6s
Repeats
No
Easing
cubic-bezier(.3,.7,.4,1)
Animates
Position translate
Show CSS
@keyframes onoma-pero {
  0% { transform: translate(0%, 0%); }
  30% { transform: translate(0%, -12%); }
  70% { transform: translate(0%, -12%); }
  100% { transform: translate(0%, 0%); }
}

.onoma-pero {
  animation: onoma-pero 0.6s cubic-bezier(.3,.7,.4,1) both;
}

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

Polish it off

All cleared

Puffs to 106%, then shrinks to a point and disappears.

Duration
0.36s
Repeats
No
Easing
ease-in
Animates
Scale · Opacity scale opacity
Show CSS
@keyframes onoma-pero-2 {
  0% { transform: scale(1, 1); opacity: 1; }
  25% { transform: scale(1.06, 1.06); opacity: 1; }
  100% { transform: scale(0, 0); opacity: 0; }
}

.onoma-pero-2 {
  animation: onoma-pero-2 0.36s ease-in both;
}

/* Reduced motion: only fade out */
@keyframes onoma-pero-2-fade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .onoma-pero-2 { animation: onoma-pero-2-fade 0.2s ease-out both; }
}
Try with my objectUse the code

Compare with similar motions

peroStick out tongue
nuruSlip slickly
patapataPatter along

Words for the same motion

ぺろり