Resources: jQuery / Javascript
Animate faster with CSS3
7 January 2013
Micro-animations, or 'nice-to-have' animations can pretty quickly add up to a bloated javascript effects library. CSS is faster, more lightweight and just as easy to code. You can run most micro-animations without even using jQuery, but naturally this relies upon the user having CSS3 support.
CSS3 Animation
.transitionable-element {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
.transitionable-element:hover {
opacity: 0.5;}
Animate with CSS3 but trigger with jQuery
.fade-out:hover {
opacity: 0.5;}
$('.transitionable-element').hover( function(){
$(this).addClass('fade-out');
}, function(){
$(this).removeClass('fade-out');
}
);