Posted By

Roen on 11/14/11

Tagged

Versions (?)

Last Edited at 11/14/11 03:48am

Statistics

Viewed 862 times

Favorited by 0 user(s)

Related snippets

CSS3 heartbeat animation

/ Published in: CSS

heartbeat pulse, a css3 animation

Highlighted TextExpand

/**
 * 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 
}

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

Report this snippet Tweet