OnomaUI

shuushuu motion

The motion for "steam keeps hissing".

しゅーしゅー1 motionOfficial

Sample

Steam keeps hissing

Steaming, in progress

Forms small, rises 200%, swells and pops, forever.

Duration
2.2s
Repeats
Yes
Easing
ease-out
Animates
Position · Scale · Opacity translate scale opacity
Show CSS
@keyframes onoma-shuushuu {
  0% { transform: translate(0%, 0%) scale(0.6, 0.6); opacity: 0; }
  15% { transform: translate(0%, -37.5%) scale(0.67, 0.67); opacity: 1; }
  80% { transform: translate(0%, -200%) scale(1, 1); opacity: 1; }
  90% { transform: translate(0%, -200%) scale(1.18, 1.18); opacity: 0; }
  100% { transform: translate(0%, -200%) scale(1.18, 1.18); opacity: 0; }
}

.onoma-shuushuu {
  animation: onoma-shuushuu 2.2s ease-out infinite both;
}

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

Compare with similar motions

Words for the same motion