jAni est un plugin jQuery permettant de créer et contrôler une animation composée par une image à plusieurs frames.

Prenez une image avec plusieurs états, transparente et si possible en GIF pour que tous les navigateurs supporte correctement l'image (merci IE ...) puis déclarez la en background sur un élément HTML:

#animation {
background: url(./images/animation.gif) no-repeat left top;
}

Grâce au plugin jQuery, cette image sera automatiquement transformée en une animation totalement contrôlable avec des boutons: Démarrer, pause, ou stop.

Il suffit de déclarer notre div portant l'id animation comme ceci:

$(document).ready(function(){
    $('#animation').jani({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 7 });
    $('#animation').jani.play();
});

Avec totalFrames égal au nombre d'images que contient votre animation, 7 dans notre cas.

Facile à intégrer et qui peut donner un effet très sympa !

Site Officiel