PULSE

[SELECTOR] { animation: pulse 2s linear infinite alternate both; } @keyframes pusle { 0% { transform: scale(1); } 100% { transform: scale(1.2); } }

FLOAT

[SELECTOR] { animation: float 2s linear infinite alternate both; } @keyframes float { 0% { transform: translateY(0); } 100% { transform: translateY(-10%); } }

WOBBLE

[SELECTOR] { animation: wobble 2s linear infinite alternate both; } @keyframes wobble { 0% { transform: rotate(0deg); } 100% { transform: rotate(-20deg); } }

SPIN

[SELECTOR] { animation: spin 2s linear infinite both; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

BEAT

[SELECTOR] { animation: beat 2s linear infinite both; } @keyframes beat { 0%,10%,100%,30%,50% { transform:scale(1); } 20%,40% { transform:scale(1.1); } }

SWING

[SELECTOR] { animation: swing 2s linear infinite alternate both; } @keyframes swing { 0% { transform: rotate(15deg); transform-origin: center top; } 100% { transform: rotate(-15deg); transform-origin: center top; } }

TADA

[SELECTOR] { animation: tada 2s linear infinite both; } @keyframes tada { 0% { transform:scale(1); } 10%,20% { transform:scale(0.9) rotate(-3deg); } 30%,50%,70%,90% { transform:scale(1.1) rotate(3deg); } 40%,60%,80% { transform:scale(1.1) rotate(-3deg); } 100% { transform:scale(1); } }

BOUNCE

[SELECTOR] { animation: bounce 2s linear infinite both; } @keyframes bounce { 0%,100%,20%,53%,80% { transform: translate(0,0); transform-origin: center bottom; } 40%,43% { transform: translate(0,-30px); } 70% { transform: translate(0,-15px); } 90% { transform: translate(0,-4px); } }

RUBBER BAND

[SELECTOR] { animation: rubberBand 2s linear infinite both; } @keyframes rubberBand { 0% { transform: scale(1,1); } 30% { transform: scale(1.25,.75); } 40% { transform: scale(0.75,1.25); } 50% { transform: scale(1.15,.85); } 65% { transform: scale(.95,1.05); } 75% { transform: scale(1.05,.95); } 100% { transform: scale(1,1); } }

SHAKE

[SELECTOR] { animation: shake 2s linear infinite both; } @keyframes shake { 0%,100% { transform: translateX(0); } 10%,30%,50%,70%,90% { transform: translateX(-10px); } 20%,40%,60%,80% { transform:translateX(10px); } }

RATTLE

[SELECTOR] { animation: rattle 2s linear infinite alternate both; } @keyframes rattle { 0% { transform: none; } 15% { transform: translate(-25%,0) rotate(-5deg); } 30% { transform: translate(20%,0) rotate(3deg); } 45% { transform: translate(-15%,0) rotate(-3deg); } 60% { transform: translate(10%,0) rotate(2deg); } 75% { transform: translate(-5%,0) rotate(-1deg); } 100% { transform: none; } }