CSS Shaking Text

Use CSS3 animation to makes any text stand out by shaking.

About This Script

To use this, simply copy the CSS from below to the <head> tag of your page. Then add the "shake" class to any piece of text you want this to apply to.

Demo

This is just a normal sentence but this part is important the rest not so much.

Code

<style type="text/css"> /** * Shaking text effect provided by http://www.top-site-list.com */ @-webkit-keyframes wiggle { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(2px, 1px) rotate(0deg); } } @keyframes wiggle { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(0px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(2px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(2px, 1px) rotate(0deg); } } .wiggle, .wiggle { animation-name: wiggle; animation-duration: 2s; transform-origin:50% 50%; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: wiggle; -webkit-animation-duration: 2s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } </style> <!-- Examples. You don't need to copy the part below. --> <p>This is just a normal sentence <strong class="wiggle">but this part is important</strong> the rest not so much.</o>
More scripts

Do you want to expose your site to millions?
Do you want to be ranked higher in Google?
Do you want to be known as the best site in your niche?

Then look no further. Add your site in 3 simple steps. Sign up, Add your site and Start receiving votes! It only takes 10 seconds!

Sign Up to Top Site List Planet Now!

Login with one of these social networks...

Sign in with FacebookSign in with TwitterSign in with Google+Sign in with Yahoo!Sign in with LinkedIn

or create an account with your email...

Login To An Existing Account