OnomaUI

koro motion

koro has 2 kinds of motion.

ころっ2 motionsOfficial

Motion by meaning

Roll over once
Change just like that

Roll over once

Item appears

Rolls in from 60% to the left and eases to a stop.

Duration
0.5s
Repeats
No
Easing
cubic-bezier(.2,.7,.3,1)
Animates
Position · Rotation translate rotate
Show CSS
@keyframes onoma-koro {
  0% { transform: translate(-60%, 0%) rotate(-68.75deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.onoma-koro {
  animation: onoma-koro 0.5s cubic-bezier(.2,.7,.3,1) both;
}

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

Change just like that

State switch

Flips open 180° around its left edge.

Duration
0.36s
Repeats
No
Easing
ease-in-out
Animates
3D turn rotateY
Show CSS
@keyframes onoma-koro-2 {
  0% { transform: perspective(400px) rotateY(0deg); }
  100% { transform: perspective(400px) rotateY(-180deg); }
}

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

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

Compare with similar motions

koroRoll over once
gabaSpring up suddenly
dondonBang bang on a door