Shaking Up The Web With CSS3 (How To Make Links Shake)



Did you know it’s possible to make links that shake when you hover on them, with pure CSS3? Nor did I, until today!

So, this is another one of those things to file in the “Totally useless, except for impressing your geek friends” category. Links (or, in fact, any elements) that shake when you hover on them. Or, you know, just shake anyway, if you leave out the :hover part.

Before we start, a challenge:

31 thoughts on “Shaking Up The Web With CSS3 (How To Make Links Shake)add yours
  1. I converted this to a ‘heartbeat’ which I use when hovering above a button… Slick!

    @-webkit-keyframes thumb {
    	0% { -webkit-transform: scale(1); }
    	50% { -webkit-transform: scale(0.9); }
    	100% { -webkit-transform: scale(1); }
    }
    
    .backbutton img:hover
    {
    	-webkit-animation-name: thumb;
    	-webkit-animation-duration: 200ms;
    	-webkit-transform-origin:50% 50%;
    	-webkit-animation-iteration-count: 2;
    	-webkit-animation-timing-function: linear;
    }
  2. J. Alexander Curtis said: #

    I think that WordPress uses the same technique on the newest version of self-hosted wordpress. If you have that installed and updated to the current version, then go to your http:// www. myDomain .com/wp-admin page and type in an incorrect username and/or password. When you press login, it will reject your credentials and the whole login box will shake along the x-axis. It only works in webkit browsers so I think it is the same effect. I suppose I could dig into the source code since it’s open source, but I don’t feel like it.

    Anyway, very cool tutorial.

    • Joss said: #

      Thanks! I believe WP login uses a jquery shake animation, but ditto – I haven’t checked personally.

  3. I’m going to step up and claim that prize :)
    I was able to work this onto my employer’s homepage, for the month of September anyway. The little idol-guy in the banner graphic gets his jiggy on when you hover.

    It was pretty fun, and the graphic artist that did the images was more than thrilled with the effect. Thanks for the idea/code!

  4. I used this in a Northwestern Football PhoneGap app. On a page that has a png of some keys, I added an accelerometer watch so that when the user shakes their phone, the CSS animation is added to the keychain image and a key jingle sound plays. It’s a tradition, they jingle keys during kickoff.

    It’s going to be a free app, so I’m not contending for the paid client thing :] Good work on getting someone to pay for it; that heartbeat thing sounds cool too.
    Thanks for the code, it worked great!

  5. Brad said: #

    @deko: All of this code works in Firefox 10 if you replace -webkit- with -moz-. I haven’t tested on earlier versions but I’m pretty sure this stuff should work a couple of versions back as well.

  6. Payod Panda said: #

    Incorporated into a paying client’s website – the company name is SocialBuzzar, with buzz in red. I did the whole package – brand identity + website design, and they were happy with the end result. Will link when the site is done hosting. =)

    • Joss said: #

      Fantastic – can’t wait to see it!

  7. Pingback: Implementing CSS Grids into Your Drupal Website

  8. Cant tell how old all these comments are as there are no dates on here, but I plan on using this in quite a few instances on a clients site, will update later. Is there any solution to have this display on non-webkit yet?

    Thanks!

  9. Pingback: Managing the Little Things: Changing Cursors Through CSS.

  10. Franco said: #

    Thanks a looot my friend!!!

  11. Summer said: #

    Thanks for the awesome tutorial! I used it on a site I am currently developing.

  12. Het! I added this to the facebook login button of my site,

    Do you think I should only apply in hover status?

    thakns for sharing

  13. Pingback: Ten Smooth-running Webkit CSS Animation Examples | CSS Animation Studio

  14. Pingback: CSS: Fun Hover Effects - Marjorie Emeline

  15. I savor, lead to I discovered just what I was looking for.
    You’ve ended my 4 day long hunt! God Bless you man. Have a great day. Bye

  16. Brandon said: #

    Thanks! Just deployed this into a in house web app thats displayed on a overhead screen. Alerts greater than 20 minutes now shake =D

  17. Amber said: #

    I’m using this animation on vibrating products for the “adult toy” store I was hired to design…the website itself is a bit out of my element, haha, but a paying customer is a paying customer!

  18. Bill said: #

    Just implemented the cool shake to https://fundfone.com tell me your thoughts on it! Is it also possible to slow it down a bit?

  19. Bill said: #

    For some reason it’s not working in IE10 or FF19? Any ideas as I can see it’s only working in Chrome.

  20. Paradox said: #

    Oh my God, thank YOU sir! This effect is really beautiful!

Leave a reply
this will never be published
@