OnomaUI

korokoro motion

korokoro has 3 kinds of motion.

ころころ3 motionsOfficial

Motion by meaning

Keep rolling
Spin in place
Roll in and stop

Keep rolling

Loading

Rolls back and forth 95% each way, rotating like a ball, forever.

Duration
0.9s
Repeats
Yes
Easing
ease-in-out
Animates
Position · Rotation translate rotate
Show CSS
@keyframes onoma-korokoro {
  0% { transform: translate(-95%, 0%) rotate(0deg); }
  100% { transform: translate(95%, 0%) rotate(217.72deg); }
}

.onoma-korokoro {
  animation: onoma-korokoro 0.9s ease-in-out infinite alternate both;
}

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

Spin in place

Refreshing

Spins 1 turn(s) in place, repeating.

Duration
1.1s
Repeats
Yes
Easing
cubic-bezier(.45,0,.55,1)
Animates
Rotation rotate
Show CSS
@keyframes onoma-korokoro-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.onoma-korokoro-spin {
  animation: onoma-korokoro-spin 1.1s cubic-bezier(.45,0,.55,1) infinite both;
}

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

Roll in and stop

Show a result

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

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

.onoma-korokoro-in {
  animation: onoma-korokoro-in 0.8s cubic-bezier(.2,.7,.3,1) both;
}

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

Compare with similar motions

korokoroKeep rolling
gowagowaStiff and coarse
tsururiSlide smoothly off

Words for the same motion

ころんごろごろころがるくるくるくるっまわる