OnomaUI

chiin motion

chiin has 2 kinds of motion.

ちーん2 motionsOfficial

Motion by meaning

A bell rings out long
End in a letdown

A bell rings out long

Signal something is done

Swings 12° from its top edge and gradually settles.

Duration
2s
Repeats
No
Easing
ease-in-out
Animates
Rotation rotate
Show CSS
@keyframes onoma-chiin {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(12deg); }
  40% { transform: rotate(-7.2deg); }
  60% { transform: rotate(4.2deg); }
  80% { transform: rotate(-1.8deg); }
  100% { transform: rotate(0deg); }
}

.onoma-chiin {
  animation: onoma-chiin 2s ease-in-out both;
  transform-origin: 50% 0%;
}

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

End in a letdown

A disappointing result

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

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

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

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

Compare with similar motions

chiinA bell rings out long
utsurautsuraDrift in and out of sleep
marumaruRound and chubby