CSS - Shake Effect

Description

It provides to move (an object) up and down or from side to side for an element.

Syntax

 @keyframes shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} }

Parameters

Transform − Transform applies to 2d and 3d transformation to an element.
Opacity − Opacity applies to an element to make translucence.

Example

 <html> <head> <style> .shakeAnimated { background-image: url(/html/images/test.png); background-repeat: no-repeat; background-position: left top; padding-top: 95px; margin-bottom: 60px; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } </style> </head> <body> <div id="shakeAnimates" class="shakeAnimated"></div> <button onclick="shakeFun()">Click</button> <script> function shakeFun() { document.getElementById("shakeAnimates").classList.add('shake'); } </script> </body> </html>

Output

It will produce the following result −

css_animation.htm

Print Page