OnomaUI

kachin motion

kachin has 2 kinds of motion.

かちん2 motionsOfficial

Motion by meaning

Hard things clink
Get irked

Hard things clink

Collision feedback

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

Duration
0.3s
Repeats
No
Easing
linear
Animates
Position · Rotation translate rotate
Show CSS
@keyframes onoma-kachin {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  14.29% { transform: translate(-5%, 0%) rotate(-1.75deg); }
  28.57% { transform: translate(4.17%, 0%) rotate(1.46deg); }
  42.86% { transform: translate(-3.33%, 0%) rotate(-1.17deg); }
  57.14% { transform: translate(2.5%, 0%) rotate(0.88deg); }
  71.43% { transform: translate(-1.67%, 0%) rotate(-0.58deg); }
  85.71% { transform: translate(0.83%, 0%) rotate(0.29deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.onoma-kachin {
  animation: onoma-kachin 0.3s linear both;
}

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

Get irked

Irritated character

Flashes out to 108% for an instant, then returns.

Duration
0.26s
Repeats
No
Easing
ease-out
Animates
Scale · Opacity scale opacity
Show CSS
@keyframes onoma-kachin-2 {
  0% { transform: scale(1, 1); opacity: 1; }
  20% { transform: scale(1.08, 1.08); opacity: 0.35; }
  50% { transform: scale(1, 1); opacity: 1; }
  100% { transform: scale(1, 1); opacity: 1; }
}

.onoma-kachin-2 {
  animation: onoma-kachin-2 0.26s ease-out both;
}

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

Compare with similar motions

kachinHard things clink
karikariIrritable and edgy
mukaFlash of anger