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');
    }
);

Tags: , , , , , ,

Let's work together