OnomaUI

hyokkori motion

The motion for "turn up unexpectedly".

ひょっこり1 motionOfficial

Sample

Turn up unexpectedly

Reveal a hidden feature

Pops up 40%, holds, then ducks back.

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

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

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

Compare with similar motions

hyokkoriTurn up unexpectedly
pitoSnuggle up
karanClear ringing clink

Words for the same motion