OnomaUI

pyokon motion

The motion for "pop up a head".

ぴょこん1 motionOfficial

Sample

Pop up a head

Show a hint

Pops up 16%, holds, then ducks back.

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

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

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

Compare with similar motions

Words for the same motion