OnomaUI

kii motion

kii has 2 kinds of motion.

きーっ2 motionsOfficial

Motion by meaning

Screech to a halt
Shriek with frustration

Screech to a halt

Fast entry and stop

Slides in from 160% to the left and stops.

Duration
0.3s
Repeats
No
Easing
cubic-bezier(.2,.8,.2,1)
Animates
Position · Opacity translate opacity
Show CSS
@keyframes onoma-kii {
  0% { transform: translate(-160%, 0%); opacity: 0; }
  40% { transform: translate(-96%, 0%); opacity: 1; }
  100% { transform: translate(0%, 0%); opacity: 1; }
}

.onoma-kii {
  animation: onoma-kii 0.3s cubic-bezier(.2,.8,.2,1) both;
}

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

Shriek with frustration

Frustrated character

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

Duration
0.4s
Repeats
No
Easing
linear
Animates
Position · Rotation translate rotate
Show CSS
@keyframes onoma-kii-2 {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  9.09% { transform: translate(-10%, 0%) rotate(-3.5deg); }
  18.18% { transform: translate(9%, 0%) rotate(3.15deg); }
  27.27% { transform: translate(-8%, 0%) rotate(-2.8deg); }
  36.36% { transform: translate(7%, 0%) rotate(2.45deg); }
  45.45% { transform: translate(-6%, 0%) rotate(-2.1deg); }
  54.55% { transform: translate(5%, 0%) rotate(1.75deg); }
  63.64% { transform: translate(-4%, 0%) rotate(-1.4deg); }
  72.73% { transform: translate(3%, 0%) rotate(1.05deg); }
  81.82% { transform: translate(-2%, 0%) rotate(-0.7deg); }
  90.91% { transform: translate(1%, 0%) rotate(0.35deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.onoma-kii-2 {
  animation: onoma-kii-2 0.4s linear both;
}

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

Compare with similar motions

kiiScreech to a halt
chitchiWag a finger: no no
furufuruShake head gently