OnomaUI

hirahira motion

hirahira has 2 kinds of motion.

ひらひら2 motionsOfficial

Motion by meaning

Flutter softly
Wave a hand

Flutter softly

Idle decoration

Flutters up to 24° with its left edge pinned, forever.

Duration
1.6s
Repeats
Yes
Easing
ease-in-out
Animates
3D turn · Skew rotateY skewY
Show CSS
@keyframes onoma-hirahira {
  0% { transform: perspective(300px) rotateY(0deg) skewY(0deg); }
  50% { transform: perspective(300px) rotateY(-24deg) skewY(-8deg); }
  100% { transform: perspective(300px) rotateY(7.2deg) skewY(5.6deg); }
}

.onoma-hirahira {
  animation: onoma-hirahira 1.6s ease-in-out infinite alternate both;
  transform-origin: 0% 50%;
}

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

Wave a hand

Hello or goodbye

Wiggles 3 time(s), up to 15°, then settles.

Duration
0.9s
Repeats
No
Easing
ease-in-out
Animates
Rotation rotate
Show CSS
@keyframes onoma-hirahira-2 {
  0% { transform: rotate(0deg); }
  14.29% { transform: rotate(15deg); }
  28.57% { transform: rotate(-12.5deg); }
  42.86% { transform: rotate(10deg); }
  57.14% { transform: rotate(-7.5deg); }
  71.43% { transform: rotate(5deg); }
  85.71% { transform: rotate(-2.5deg); }
  100% { transform: rotate(0deg); }
}

.onoma-hirahira-2 {
  animation: onoma-hirahira-2 0.9s ease-in-out both;
}

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

Compare with similar motions

hirahiraFlutter softly
pukapukaBob on the water
mokumokuBillowing smoke