OnomaUI

dokan motion

The motion for "a banging jolt".

どかん1 motionOfficial

Sample

A banging jolt

A serious error

Shakes 3 times, starting at 16% and fading out.

Duration
0.6s
Repeats
No
Easing
linear
Animates
Position · Rotation translate rotate
Show CSS
@keyframes onoma-dokan {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  14.29% { transform: translate(-16%, 0%) rotate(-5.6deg); }
  28.57% { transform: translate(13.33%, 0%) rotate(4.67deg); }
  42.86% { transform: translate(-10.67%, 0%) rotate(-3.73deg); }
  57.14% { transform: translate(8%, 0%) rotate(2.8deg); }
  71.43% { transform: translate(-5.33%, 0%) rotate(-1.87deg); }
  85.71% { transform: translate(2.67%, 0%) rotate(0.93deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.onoma-dokan {
  animation: onoma-dokan 0.6s linear both;
}

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

Compare with similar motions