CSS3 animationsand their jQuery equivalents

Marcofolio.net

Below, you'll find two columns. The left column shows five kind of CSS3 animations, the right column shows the same kind of animations, but done with jQuery. Hover the elements (or click in the accordion) to activate the animation. Click on the "Gear" icon to view the code behind it.

Please note that the CSS3 animation examples only work on webkit based browsers. For the time being, this simply means the latest versions of Apple Safari and Google Chrome.

CSS3

Fade

Fade Image
View the Code 

@-webkit-keyframes fade {
	0% {
		opacity: 1.0;
	}
	100% {
		opacity: 0.5;
	}
}

.css3_fadeimg:hover {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1s;
}

Bounce

View the Code 

@-webkit-keyframes bounce {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 250px;
	}
}

.css3_bounce:hover img {
	-webkit-animation-name: bounce;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 2;
	-webkit-animation-direction: alternate;
}

Pulsate and Colorize

View the Code 

@-webkit-keyframes pulsate {
	0% { width:100px; }
	5% { width:150px; left:-25px; }
	10% { width:100px; left:0px; }
	15% { width:150px; left:-25px; }
	20% { width:100px; left:0px; }
	
	40% { width:100px; background-color:#38374A; }
	45% { width:150px; left:-25px; background-color:#38374A; }
	50% { width:100px; left:0px; background-color:#38374A; }
	55% { width:150px; left:-25px; background-color:#38374A; }
	60% { width:100px; left:0px; background-color:#38374A; }

	80% { width:100px; background-color:#45002D; }
	100% { width:100px; background-color:#45002D; }
}

.css3_pulsate:hover {
	-webkit-animation-name: pulsate;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease-in-out;
}

Link nudge

View the Code 

.css3_nudge ul li a {
	-webkit-transition-property: color, background-color, padding-left;
	-webkit-transition-duration: 500ms, 500ms, 500ms;
}
			
.css3_nudge ul li a:hover {
	background-color: #efefef;
	color: #333;
	padding-left: 50px;
}

Accordion

First accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra consectetur justo, in semper nunc hendrerit quis. Quisque tempus suscipit massa, non rutrum est egestas eget.

Second accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra consectetur justo, in semper nunc hendrerit quis. Quisque tempus suscipit massa, non rutrum est egestas eget.

Third accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra consectetur justo, in semper nunc hendrerit quis. Quisque tempus suscipit massa, non rutrum est egestas eget.

View the Code 

.css3_accordion div {
	height: 0;
	overflow: hidden;
	-webkit-transition: height 500ms ease; }
.css3_accordion div:target {
	height: 105px;
}

jQuery

Fade

Fade Image
View the Code 

$(".jquery_fadeimg").hover(function() {
	$(this).stop().animate({ opacity: 0.5 }, 1000, function() {
		$(this).stop().animate({ opacity: 1.0 }, 0);
	});
}, function() {
	$(this).stop().animate({ opacity: 1.0 }, 0);
});

Bounce

View the Code 

$(".jquery_bounce").mouseenter(function(){
	$("img", this).animate({ marginLeft : '250px' } , {
			duration: 1000,
			easing: 'easeOutCubic',
			complete:function() {
				$(this).animate({ marginLeft : '0px' } , {
				duration: 1000,
				easing: 'easeInCubic'});	
			}
		});
}).mouseleave(function() {
	$("img", this).stop().css({ marginLeft : '0px' });
});

Pulsate and Colorize

View the Code 

$(".jquery_pulsate").hover(function() {
	$(this).stop().animate({ width: '150px', left:'-25px' }, 150, function(){
		$(this).animate({ width: '100px', left:'0px' }, 150, function() {
			$(this).animate({ width: '150px', left:'-25px' }, 150, function() {
				$(this).animate({ width: '100px', left:'0px' }, 150, function() {
					$(this).animate({ backgroundColor: '#38374A' }, 600, function() {
						$(this).animate({ width: '150px', left:'-25px' }, 150, function(){
							$(this).animate({ width: '100px', left:'0px' }, 150, function() {
								$(this).animate({ width: '150px', left:'-25px' }, 150, function() {
									$(this).animate({ width: '100px', left:'0px' }, 150, function() {
										$(this).animate({ backgroundColor: '#45002D' }, 600, function() {
											// No actual animation (backgroundColor is already set), but need it to
											// set the delay before changing back.
											$(this).animate({ backgroundColor: '#45002D' }, 600, function() {
												$(this).animate({ width: '100px', backgroundColor: '#6CAB6C' }, 1);
											});
										});
									});
								});
							});
						});
					});
				});
			});
		});
	});
}, function() {
	$(this).stop().animate({ width: '100px', backgroundColor: '#6CAB6C' }, 1);
});

Link nudge

View the Code 

$(".jquery_nudge ul li a").hover(function(){
	$(this).stop().animate({ paddingLeft: '50px', backgroundColor: '#efefef', color : '#333' }, 500);	
}, function() {
	$(this).stop().animate({ paddingLeft: '25px', backgroundColor: '#ffffff', color : '#afafaf' }, 500);
});

Accordion

First accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra consectetur justo, in semper nunc hendrerit quis. Quisque tempus suscipit massa, non rutrum est egestas eget.

Second accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra consectetur justo, in semper nunc hendrerit quis. Quisque tempus suscipit massa, non rutrum est egestas eget.

Third accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra consectetur justo, in semper nunc hendrerit quis. Quisque tempus suscipit massa, non rutrum est egestas eget.

View the Code 

$(".jquery_accordion").accordion({ header: 'a' });