OnomaUI

pa motion

pa has 2 kinds of motion.

ぱっ2 motionsOfficial

Motion by meaning

Appear in a flash
Vanish in a flash

Appear in a flash

Show a menu

Zooms from 70% scale straight to full size.

Duration
0.2s
Repeats
No
Easing
cubic-bezier(.2,.9,.3,1)
Animates
Scale · Opacity scale opacity
Show CSS
@keyframes onoma-pa {
  0% { transform: scale(0.7, 0.7); opacity: 0; }
  60% { transform: scale(0.88, 0.88); opacity: 1; }
  100% { transform: scale(1, 1); opacity: 1; }
}

.onoma-pa {
  animation: onoma-pa 0.2s cubic-bezier(.2,.9,.3,1) both;
}

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

Vanish in a flash

Close / dismiss

Expands to 115% and rises 0% as it fades away.

Duration
0.22s
Repeats
No
Easing
ease-out
Animates
Position · Scale · Opacity translate scale opacity
Show CSS
@keyframes onoma-pa-2 {
  0% { transform: translate(0%, 0%) scale(1, 1); opacity: 1; }
  100% { transform: translate(0%, 0%) scale(1.15, 1.15); opacity: 0; }
}

.onoma-pa-2 {
  animation: onoma-pa-2 0.22s ease-out both;
}

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

Compare with similar motions

paAppear in a flash
piripiriTense and on edge
waBoo! A sudden surprise