Posted By

Roen on 11/14/11


Tagged

animation CSS3 heartbeat shake


Versions (?)

CSS3 heartbeat animation


 / Published in: CSS
 

URL: http://www.cssreset.com/2011/css-tutorials/css3-webkit-animation-shake-links/

heartbeat pulse, a css3 animation

  1. /**
  2.  * Edited by Jeroen Franse
  3.  * Shake is now heartbeat
  4.  * CSSReset.com - Demo - Shaking Up The Web With CSS3 (or: How To Make Links Shake In Their Space-Boots) - Webkit only
  5.  *
  6.  * Contains CSS rules to make elements shake using -webkit-animations.
  7.  * Original Tutorial: http://www.cssreset.com/2011/css-tutorials/css3-webkit-animation-shake-links/
  8.  *
  9.  * by Joss Crowcroft and CSS Reset
  10.  * 1st January 2011
  11.  *
  12.  * License: Do whatever makes you happy! And, you know, give credit and links back if you like it.
  13.  *
  14.  * If you manage to work this into a project, please comment up and let me know. Kay?
  15.  */
  16.  
  17.  
  18. /**
  19.  * The declaration of the groovy shaky 'spaceboots' animation
  20.  */
  21. @-webkit-keyframes spaceboots {
  22. 0% { -webkit-transform: scale(1); }
  23. 30% { -webkit-transform: scale(1); }
  24. 40% { -webkit-transform: scale(1.05); }
  25. 50% { -webkit-transform: scale(1); }
  26. 60% { -webkit-transform: scale(1); }
  27. 70% { -webkit-transform: scale(1.03); }
  28. 80% { -webkit-transform: scale(1); }
  29. 100% { -webkit-transform: scale(1); }
  30.  
  31.  
  32. }
  33.  
  34.  
  35. /**
  36.  * Apply the aforementioned animation to the following pseudo-selectors:
  37.  *
  38.  * NB: Normally, we'd just use the class e.g. '.shake', but for this demo, I'm also applying it to all links.
  39.  * To all intents and purposes, you can pretty much apply this to anything (read the tutorial for more info)
  40.  */
  41. .shake:hover,
  42. .shake:focus,
  43. a:hover,
  44. a:focus {
  45. -webkit-animation-name: 'spaceboots';
  46. -webkit-animation-duration: 900ms;
  47. -webkit-transform-origin:70% 70%;
  48. -webkit-animation-iteration-count: 5;
  49. -webkit-animation-timing-function: linear;
  50. }
  51.  
  52.  
  53. /**
  54.  * Some extra styling to help it along, as inline elements won't do the shake:
  55.  */
  56. .shake {
  57. display:block;
  58. position:relative;
  59. }
  60. a,
  61. .shake.inline {
  62. display:inline-block
  63. }

Report this snippet  

You need to login to post a comment.