Advanced Search

CSS3 heartbeat animation

/ Published in: CSS
Save to your folder(s)
heartbeat pulse, a css3 animation

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.