OnomaUI

supasupa motion

The motion for "slice through one by one".

すぱすぱ1 motionOfficial

Sample

Slice through one by one

Batch processing

Snaps between 12° left and right, like a ticking clock.

Duration
0.6s
Repeats
Yes
Easing
cubic-bezier(.6,0,.4,1)
Animates
Rotation rotate
Show CSS
@keyframes onoma-supasupa {
  0% { transform: rotate(-12deg); }
  40% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
  90% { transform: rotate(12deg); }
  100% { transform: rotate(-12deg); }
}

.onoma-supasupa {
  animation: onoma-supasupa 0.6s cubic-bezier(.6,0,.4,1) infinite both;
  transform-origin: 50% 100%;
}

/* Reduced motion: no motion */
@media (prefers-reduced-motion: reduce) {
  .onoma-supasupa { animation: none; }
}

Compare with similar motions