Images animées tout en CSS

Quand on souhaite afficher une image animée dans un navigateur il n'y a pas 36 solutions. Il y a peu je n'en connaissais que deux: le format GIF animé et le APNG (animated PNG). Le problème avec ces formats c'est que l'image au finale est de 30% à 40% plus lourde que le poids total des images qui la compose. Finalement je me suis apperçu que la règle @keyframes en CSS3 pouvait offrir une alternative.

Télécharger une démo au format.7z ou au format.gz.

Comment ça marche

Un soupçon de HTML

<div id="chaplin"><img src="gogolplexTV.png"></div>

Un élément HTML (div id="chaplin") qui contient une image; la télévision dont l'écran est transparent. Cette image est purement esthétique et l'opacité de l'écran va nous permettre de voir le "background" de l'élément DIV. Vous commencez à comprendre, nous allons faire défiler les images de l'animation sur l'arrière plan de l'élément DIV grâce à la propriété animation associée à la règle @keyframes de CSS3.

Une dose de CSS

#chaplin {
    background-image: url("./c1/chap6.jpg");
    background-position: top 30px left 41px;
    background-repeat: no-repeat;
    position: absolute;
    bottom:100px;
    left:100px;
    animation-duration: 0.5s;
    animation-name: movieChaplin;
    animation-iteration-count: infinite;
}
@keyframes movieChaplin {
    from {background-image: url("./c1/chap1.jpg");}
    20%{background-image: url("./c1/chap2.jpg");}
    40%{background-image: url("./c1/chap3.jpg");}
    60%{background-image: url("./c1/chap4.jpg");}
    80%{background-image: url("./c1/chap5.jpg");}
    to {background-image: url("./c1/chap6.jpg");}
}

Et voila, il est donc possible de réaliser une animation d'images en pur CSS.

Un peu de Javascript

Bien que plus complexe à mettre en place cette méthode apporte ses avantages. En plus du gain en ko je vous laisse imaginer les possibilités avec du Javascript. Dans l'exemple présenté ici j'ai juste ajouté ces quelques lignes pour interagir avec l'animation.

<button onclick="document.getElementById('chaplin').style.animationDirection = 'reverse';">reverse</button>
<button onclick="document.getElementById('chaplin').style.animationDuration = '1s';">1s</button>
<button onclick="document.getElementById('chaplin').style.animationDuration = '0.5s';">0.5s</button>
<button onclick="document.getElementById('chaplin').style.animationDuration = '0.2s';">0.2s</button>
<button onclick="document.getElementById('chaplin').style.animationDirection = 'normal';">normal</button>

A vous d'imaginer la suite ...

^