Wave Animation Variants

10 distinct wave patterns × 3 color channels (click to copy CSS)

Cyan

Wave-LR

Click to copy

Wave-RL

Click to copy

Wave-TB

Click to copy

Wave-BT

Click to copy

Wave-Diag-TL

Click to copy

Wave-Diag-BR

Click to copy

Ripple

Click to copy

Wave-Double

Click to copy

Wave-Spiral

Click to copy

Wave-Pulse

Click to copy

Amber

Wave-LR

Click to copy

Wave-RL

Click to copy

Wave-TB

Click to copy

Wave-BT

Click to copy

Wave-Diag-TL

Click to copy

Wave-Diag-BR

Click to copy

Ripple

Click to copy

Wave-Double

Click to copy

Wave-Spiral

Click to copy

Wave-Pulse

Click to copy

Rose

Wave-LR

Click to copy

Wave-RL

Click to copy

Wave-TB

Click to copy

Wave-BT

Click to copy

Wave-Diag-TL

Click to copy

Wave-Diag-BR

Click to copy

Ripple

Click to copy

Wave-Double

Click to copy

Wave-Spiral

Click to copy

Wave-Pulse

Click to copy

CSS Snippets

Click any animation above to copy its CSS code, or see the base animation below:

@keyframes waveAnimation {
  0%, 100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.3) translateY(-2px);
    opacity: 0;
  }
}