Shake effect using CSS3

CSS Keyframes are used to create animations.There are many CSS3 animation methods available.In this article i am going to show how to add shake effect for text.

Live DemoDownload Script

CSS3 animation

/*for webkit browsers*/
@-webkit-keyframes shake {
    0% { -webkit-transform: translate(0px); }
    20% { -webkit-transform: translate(10px); }
    40% { -webkit-transform: translate(-10px); }
    51% { -webkit-transform: translate(6px); }
    70% { -webkit-transform: translate(-6px); }
    90% { -webkit-transform: translate(3px); }
    100% { -webkit-transform: translate(0px); }
}
/*for mozilla browser*/
@-moz-keyframes shake {
    0% { -moz-transform: translate(0px); }
    20% { -moz-transform: translate(10px); }
    40% { -moz-transform: translate(-10px); }
    51% { -moz-transform: translate(6px); }
    70% { -moz-transform: translate(-6px); }
    90% { -moz-transform: translate(3px); }
    100% { -moz-transform: translate(0px); }
}
.shake:hover {
    -webkit-animation: shake 0.7s;/*for webkit browsers*/
    -moz-animation: shake 0.7s;/*for mozilla browser*/
}

HTML code for disable right click

 <p class="shake">Codeinnovators</p>

The class name is used to set which animation you want.

Please share your comments and feedback.Thanks.Please subscribe my updates via email.