OnomaUI

do motion

do has 2 kinds of motion.

どっ2 motionsOfficial

Motion by meaning

Surge all at once
Suddenly exhausted

Surge all at once

Many alerts at once

Swells softly to 128% and back.

Duration
0.4s
Repeats
No
Easing
ease-in-out
Animates
Scale scale
Show CSS
@keyframes onoma-do {
  0% { transform: scale(1, 1); }
  50% { transform: scale(1.28, 1.28); }
  100% { transform: scale(1, 1); }
}

.onoma-do {
  animation: onoma-do 0.4s ease-in-out both;
}

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

Suddenly exhausted

Show sudden fatigue

Sinks 30% heavily, stays a while, then rises back.

Duration
1.2s
Repeats
No
Easing
ease-in-out
Animates
Position · Scale translate scale
Show CSS
@keyframes onoma-do-2 {
  0% { transform: translate(0%, 0%) scale(1, 1); animation-timing-function: ease-out; }
  35% { transform: translate(0%, 30%) scale(1.04, 0.9); }
  75% { transform: translate(0%, 30%) scale(1.04, 0.9); }
  100% { transform: translate(0%, 0%) scale(1, 1); }
}

.onoma-do-2 {
  animation: onoma-do-2 1.2s ease-in-out both;
  transform-origin: 50% 100%;
}

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

Compare with similar motions

doSurge all at once
gayagayaNoisy crowd chatter
mojimojiFidget shyly

Words for the same motion

どどっ