CSS3 heartbeat animation

                                          /** * Edited by Jeroen Franse * Shake is now heartbeat * CSSReset.com - Demo - Shaking Up The Web With CSS3 (or: How To Make Links Shake In Their Space-Boots) - Webkit only *  * Contains CSS rules to make elements shake using -webkit-animations. * Original Tutorial: http://www.cssreset.com/2011/css-tutorials/css3-webkit-animation-shake-links/ * * by Joss Crowcroft and CSS Reset * 1st January 2011 * * License: Do whatever makes you happy! And, you know, give credit and links back if you like it. * * If you manage to work this into a project, please comment up and let me know. Kay? */  /** * The declaration of the groovy shaky 'spaceboots' animation  */@-webkit-keyframes spaceboots {
    0% {
        -webkit-transform: scale(1);
    }
    30% {
        -webkit-transform: scale(1);
    }
    40% {
        -webkit-transform: scale(1.05);
    }
    50% {
        -webkit-transform: scale(1);
    }
    60% {
        -webkit-transform: scale(1);
    }
    70% {
        -webkit-transform: scale(1.03);
    }
    80% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1);
    }
      
}
  /** * Apply the aforementioned animation to the following pseudo-selectors: *  * NB: Normally, we'd just use the class e.g. '.shake', but for this demo, I'm also applying it to all links. * To all intents and purposes, you can pretty much apply this to anything (read the tutorial for more info) */.shake:hover, .shake:focus,a:hover, a:focus {
    -webkit-animation-name: 'spaceboots';
    -webkit-animation-duration: 900ms;
    -webkit-transform-origin: 70% 70%;
    -webkit-animation-iteration-count: 5;
    -webkit-animation-timing-function: linear;
}
  /** * Some extra styling to help it along, as inline elements won't do the shake: */.shake {
    display: block;
    position: relative;
}
a, .shake.inline {
    display: inline-block;
}