patapata motion

Flap lightly

Flag or fan

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

Duration: 0.6s
Repeats: Yes
Easing: ease-in-out
Animates: 3D turn · Skew rotateY skewY

Show CSS

@keyframes onoma-patapata {
  0% { transform: perspective(300px) rotateY(0deg) skewY(0deg); }
  50% { transform: perspective(300px) rotateY(-30deg) skewY(-4deg); }
  100% { transform: perspective(300px) rotateY(9deg) skewY(2.8deg); }
}

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

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

Try with my object Use the code

Patter along

Show hurry

Hops 6 steps (10% high) across 100%, repeating.

Duration: 0.8s
Repeats: Yes
Easing: linear
Animates: Position · Opacity translate opacity

Show CSS

@keyframes onoma-patapata-2 {
  0% { transform: translate(-50%, 0%); opacity: 0; animation-timing-function: ease-out; }
  8.33% { transform: translate(-41.67%, -10%); opacity: 1; animation-timing-function: ease-in; }
  16.67% { transform: translate(-33.33%, 0%); opacity: 1; animation-timing-function: ease-out; }
  25% { transform: translate(-25%, -10%); opacity: 1; animation-timing-function: ease-in; }
  33.33% { transform: translate(-16.67%, 0%); opacity: 1; animation-timing-function: ease-out; }
  41.67% { transform: translate(-8.33%, -10%); opacity: 1; animation-timing-function: ease-in; }
  50% { transform: translate(0%, 0%); opacity: 1; animation-timing-function: ease-out; }
  58.33% { transform: translate(8.33%, -10%); opacity: 1; animation-timing-function: ease-in; }
  66.67% { transform: translate(16.67%, 0%); opacity: 1; animation-timing-function: ease-out; }
  75% { transform: translate(25%, -10%); opacity: 1; animation-timing-function: ease-in; }
  83.33% { transform: translate(33.33%, 0%); opacity: 1; animation-timing-function: ease-out; }
  91.67% { transform: translate(41.67%, -10%); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translate(50%, 0%); opacity: 0; }
}

.onoma-patapata-2 {
  animation: onoma-patapata-2 0.8s linear infinite both;
}

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

Try with my object Use the code

Motion by meaning

Flap lightly

Patter along

Compare with similar motions