10 distinct wave patterns × 3 color channels (click to copy CSS)
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
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
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
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;
}
}