OnomaUI

noso motion

The motion for "slowly show up".

のそっ1 motionOfficial

Sample

Slowly show up

Low-key hint

Pops up 20%, holds, then ducks back.

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

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

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

Compare with similar motions