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
@-webkit-keyframes fade {
0% {
opacity: 1.0;
}
100% {
opacity: 0.5;
}
}
.css3_fadeimg:hover {
-webkit-animation-name: fade;
-webkit-animation-duration: 1s;
}Bounce
@-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
@-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
.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
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.
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.
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.
.css3_accordion div {
height: 0;
overflow: hidden;
-webkit-transition: height 500ms ease; }
.css3_accordion div:target {
height: 105px;
}jQuery
Fade
$(".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
$(".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
$(".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
$(".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
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.
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.
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.
$(".jquery_accordion").accordion({ header: 'a' });