Rubber Band
Alternating horizontal and vertical stretch, like a rubber band.
Preview
Tune parameters
Full code
/* Rubber Band */
@keyframes rubberBand {
0%, 100% { transform: scale(1, 1); }
30% { transform: scale(1.25, .75); }
40% { transform: scale(.75, 1.25); }
50% { transform: scale(1.15, .85); }
65% { transform: scale(.95, 1.05); }
75% { transform: scale(1.05, .95); }
}
.rubber-band { animation: rubberBand .8s ease-out both; }