C'est pas parce qu'on s'y connait
Qu'on n'a pas besoin d'aide

Découvrez nos contriburteurs
Découvrez les talents cachés
de nos contributeurs !
Facebook page Web y es-tu ? Twitter MemePasGarantie Twitter Yoplet Google + Web y es-tu ? Contactez notre équipe Les visages de Web y es-tu ?

Tuto : animation sans Flash avec HTML 5 et CSS 3

Animation javascript sans flashCe billet est une traduction réalisée par mes soins de Flashless animation : un très bon article de Rachel Nabors sur 24ways.org (merci Julien). Abordable et très instructif dès les premiers paragraphes, cet article est juste génial pour découvrir l’animation sans Flash et sans JavaScript.

MAJ : Si les animations sont figées chez vous, passez la souris dessus et cliquez sur le bouton « rerun » pour la rejouer une fois ou sur « edit on Codepen » pour la voir fonctionner en boucle.

Attention : Utilisateurs d’Internet Explorer 9 et précédent, votre charmant navigateur ne prenant pas en charge la propriété animation de CSS3, vous ne pourrez pas apprécier nos exemples animés (et quelque part, c’est bien fait pour vous, depuis le temps qu’on vous dit de changer de crèmerie…)
——————–

Quand je suis arrivée dans le monde du webdesign il y a quatre ans, la première chose que je voulais faire était d’animer un dessin dans le navigateur. J’ai dessiné des personnages pendant des années, et j’ai toujours voulu les voir devenir vivant. L’animation flash avait encore le vent en poupe, mais je ne voulais pas apprendre Flash. Je voulais apprendre le JavaScript !

Malheureusement, l’animation avec JavaScript reste limitée et assez consommatrice de ressources. Ma première intégration d’un fond se répétant en boucle a plus contribué à faire un trou dans mon processeur qu’à impressionner mes amis (cependant ça restait quand même cool). Et il n’y avait toujours pas de moyen simple pour ajouter du son. La technologie des navigateurs n’en était pas là.

Les choses sont différentes maintenant. Les transitions et animations en CSS 3 peuvent faire le plus gros du travail et la balise audio d’HTML 5 est là pour la musique et les clips audio. Vous pouvez faire beaucoup sans rien apprendre de JavaScript, et si vous l’apprenez, vous pouvez faire tellement plus !

Dans ce projet, je vais vous montrer comment animer un simple cycle de marche avec une musique qui boucle. J’espère que cela va vous inspirer pour faire quelque chose de vraiment cool qui va impressionner vos amis. J’adorerai voir ce que vous en ferez, alors s’il vous plaît envoyez-moi vos créations à rachelnabors.com !

Note : Étant donné que chaque navigateur veut utiliser ses propres préfixes pour l’animation en CSS 3, et que je n’ai ni le temps ni la place pour tous les écrire, je vais utiliser la syntaxe standard du W3C ; comme ça, sans préfixe. Vous pouvez les implémenter avec Prefixfree, ou les rajouter à la main. Si vous prenez ce long chemin, je vous recommande Sass et Compass afin de vous concentrer sur vos animations plutôt que sur le copier / coller.

Le cycle de marche

Le cycle de marche est un peu le « Hello world » de l’animation. Un des premiers projets d’animation d’étudiants qui passent des heures à dessiner des douzaines d’images pour compléter la boucle d’un personnage qui marche.

La plupart des animateurs ne dessinent pas toutes les images. Ils dessinent quelques images clés et les envoient aux productions d’animation qui planchent sur les images manquantes (between frames ou tween frames). C’est méticuleux, épuisant, et requiert une grande attention pour les détails des mouvements naturels. C’est aussi pourquoi tant de productions d’animation sont expédiées à l’étranger où le travail est moins cher.

Heureusement, nous n’avons pas à s’inquiéter du nombre d’images car nous pouvons configurer notre ratio d’images par seconde via CSS3. Puisque l’on essaye d’impressionner des amis, et non des directeurs d’animation, les incohérences ne devraient pas être un problème (sauf si vos amis sont directeur d’animation).

C’est un simple cycle de marche que j’ai fait à partir de mon personnage de comic Tuna pour ma conférence sur l’animation CSS à la CSS Dev Conference cette année :

La magie réside ici:

animation: walk-cycle 1s steps(12) infinite;

Ce qui correspond à :

animation: <name> <duration> <timing-function> <iteration-count>;

walk-cycle est une simple @keyframes block qui anime le fond de la class .tuna :

@keyframes walk-cycle {
0% {background-position: 0 0; }
100% {background-position: 0 -2391px;}
}

Le fond a exactement 12 partitions de Tuna qui forment un cycle de marche complet. Nous le réglons de manière à ce que toutes les partitions soient jouées en une seconde et à l’infini. Alors pourquoi toute l’image de fond ne défile pas dans .tuna ? C’est grâce à la fonction steps(). Utiliser steps() dit au CSS de faire des sauts au lieu des transitions fluides que l’on peut obtenir avec linear. Chris Mills a écrit dans son excellente intro à l’animation CSS3 :

Au lieu d’avoir un rendu fluide tout le long de l’animation, [steps()] fait que l’animation suit un nombre d’étapes de part égale durant l’animation. Par exemple, steps(10) ferait que l’animation se compose de 10 étapes égales. Il y a aussi un second paramètre optionnel qui prend la valeur de start ou end. Steps10 (10, start) spécifierait que la valeur de la propriété serait effective au début de chaque étape, alors que steps (10, end) rendrait cette valeur effective à la fin de l’étape.

(Sérieusement, allez lire l’article entier. Je n’aborde pas ici la moitié du sujet qu’il traite car je ne peux pas faire mieux sur les basiques que ce qu’il a déjà fait.)

Le fond

Un chat marchant dans le vide est une animation impressionnante et il est certain que votre pote pourrait faire de même s’il chope certain .gif de chat qu’il utilise quand il chatte. Alors ajoutons un fond en parallax. Oui, oui, tous les web-designers ont signé un traité de paix pour ne plus abuser des parallax, mais ceci est un véritable appel – que le traité soit damné.

Pensez que nous avions besoin de Javascript pour faire ça ! C’est toujours consommateur de CPU mais beaucoup moins compliqué. Nous commençons par séparer la page en plusieurs calques, .foreground, .midground, and .background. Nous rajoutons .tuna sur le.midground.

.background a plusieurs images de fond, toutes configurées pour se répéter horizontalement.

background-image:
url(background_mountain5.png),
url(background_mountain4.png),
url(background_mountain3.png),
url(background_mountain2.png),
url(background_mountain1.png);
background-repeat: repeat-x;

Avec le parallax, les image au premier plan bougent plus vite que celles en arrière-plan. La prochaine fois que vous conduirez, remarquez comme ce qui est plus proche de vous sort beaucoup plus vite de votre champ de vision que ce qui est plus loin, comme les montagnes ou les gros bâtiments. Nous pouvons simuler cet effet en faisant bouger les images de fond en haut (dans le .foreground, plus proche de nous ), dans une zone plus large que celles en bas (qui sont plus éloignées).

Les différentes longueurs nous permettent d’utiliser une seule propriété d’animation pour faire défiler toutes les images de fond à différentes vitesses dans le même intervalle de temps :

animation: parallax_bg linear 40s infinite;

Les images les plus petites doivent parcourir moins de distance que les images plus longues dans le même laps de temps. Elles bougent donc moins vite.

Construction du background

Jetons un œil à l’animation du background :

@keyframes parallax_bg {
0% {
background-position: -2400px 100%, -2000px 100%, -1800px 100%, -1600px 100%, -1200px 100%;
}
100% {
background-position: 0 100%, 0 100%, 0 100%, 0 100%, 0 100%;
}
}

À 0 %, toutes les images de fond sont positionnées à la valeur négative de leur longueur. Ensuite elles commencent à bouger vers background-position : 0 100 %. Si nous voulions les faire défiler dans la direction inverse, nous aurions remplacé les valeurs négatives par 0 % (ainsi elle auraient commencé à 2400px 100 %, 2000px 100 % etc.). Essayez de changer la valeur dans le bloc de code ci-dessus ou remplacer backgrond-repeat par none pour voir comment les images interagissent ensemble.

.foreground et.midgroun fonctionnent sur les même principes, seulement ils n’utilisent qu’une seule image de fond.

La musique

Après avoir fini le premier jet de mon cycle de marche original, j’en ai fait un .gif que j’ai posté sur YTMND avec une musique du film Paprika : « The Girl in Byakkoya ». Après l’avoir montré à quelques collègues de ma communauté, il est devenu clair que c’était une combinaison gagnante. Alors utilisons HTML 5 pour obtenir un clip en boucle !

Attention, il y a du son. Ajustez votre volume ou mettez un casque.

Musique sur l'animation de Tuna

Nous utilisons le loop audio d’HTML5 et autoplay pour jouer automatiquement en boucle un fichier audio une fois la page chargée :

<audio loop autoplay>
<source src= »http://music.com/clip.mp3″ />
</audio>

Malheureusement, vous remarquerez qu’il y a une courte pause entre chaque répétition. HTML 5 audio n’est qu’à moitié au point. Espérons un jour que l’API Web Audio sera capable de nous aider, mais en attendant, nous devrons nous dépatouiller pour arranger ces courts intervalles.

Il se trouve qu’il y a un petit script appelé seamlessLoop.js qui nous permet de corriger ça. Si nous devenions réellement fou avec ce bazar, nous pourrions sortir l’artillerie lourde comme sound.js. Mais ça serait trop pour une simple boucle (et expliquer l’API Web Audio pourrait ennuyer, plutôt que d’impressionner vos amis) !

Installez seamlessLoop.js qui va enlever la pause, et maintenant notre cycle de marche est complet.

(J’ai fait quelques tests pour voir si le navigateur peut jouer les fichier .mp3. Sinon, nous retournerons à l’utilisation du format.ogg (utilisateurs d’Opera et Firefox, vous êtes les bienvenus).)

Impressionnez vraiment vos amis en ajoutant un cycle de course

Nous avons la musique, nous avons un cycle de marche, nous avons un parallax. Ça va être rapide de les assembler et d’avoir une simple animation sans fin. Mais passons à l’étape suivante et épatons nos spectateurs en ajoutant un cycle de course.

Le cycle de course

Passer de notre cycle de marche à notre cycle de course va nécessiter une troisième séquence d’animation : une animation transitionnelle de Tuna passant de la marche à la course. J’ai donc rajouté ces partitions :

Les différents sprites de Tuna

Mettons nous au boulot pour coder ces transitions. Nous allons utiliser plusieurs animations dans la même div .tuna, mais nous allons les démarrer à différents intervalles avec animation-delay – pas de JavaScript requit ! N’est-ce pas magique ?

Ça requiert un soupçon de maths (vraiment un soupçon, ça ne fait pas de mal), pour coordonner tout ça. Nous voulons :

  1. Jouer deux fois l’animation de marche
  2. Jouer une seule fois l’animation de transition (qui commence et finit parfaitement entre la dernière image du cycle de marche et la première image du cycle de course – pas de boucle ici baby)
  3. RUN FOREVER

Nous utilisons le modèle animation: <name> <duration> <timing-function> <delay> <iteration-count>, ce qui nous donne :

animation:
walk-cycle 1s steps(12) 2,
walk-to-run .75s steps(12) 2s 1,
run-cycle .75s steps(13) 2.75s infinite;

J’ai joué avec le temps pour obtenir des mouvements plus réalistes. Vous remarquerez que l’animation de course paraît plus fluide que l’animation de marche. C’est parce qu’elle a 13 images clés pour 0.75 secondes au lieu de 12 pour une seconde. Rappelez-vous, les professionnels de l’animation utilisent un très grand nombre d’images. Cette petite animation ne vaut même pas les standards de PBS (NDLR : une chaîne télévisée américaine) !

La musique : optimiser la lecture avec les sprites audio HTML5

Ma partie préférée dans The Girl in Byakkoya est le moment où l’ouverture évolue vers quelque chose de plus rythmé. Je veux commencer à faire marcher Tuna pendant l’ouverture, et ensuite la faire courir et bondir en boucle pour l’éternité.

  1. L’intro dure 24 secondes, nous allons donc configurer notre cycle de marche, d’une durée d’une seconde, pour le répéter 24 fois : walk-cycle 1s steps(12) 24
  2. Nous décalons walk-to-run pour qu’il commence à 24 secondes. Il se jouera en 0.75 secondes avant…
  3. De jouer run-cycle à 24.75 secondes et le faire boucler indéfiniment.

Pour la musique, nous devons réfléchir à deux parties : l’intro et la boucle rythmée. Nous pouvons faire ça avec les partitions audio : utiliser un élément audio en HTML 5 puis se servir de JavaScript pour changer le début de la lecture, un peu comme sauter des pistes avec un lecteur CD.

Cependant cette technique va laisser des petits trous dans le changement de morceau, je pense néanmoins que ça vaut le coup de l’utiliser pour vous donner une idée.

// Get the audio element
var byakkoya = document.querySelector(‘audio’);
// create function to play and loop audio
function song(a){
//start playing at 0
a.currentTime = 0;
a.play();
//when we hit 64 seconds…
setTimeout(function(){
// skip back to 24.5 seconds and keep playing…
a.currentTime = 24.55;
// then loop back when we hit 64 again, or every 59.5 seconds.
setInterval(function(){
a.currentTime = 24.55;
},39450);
},64000);
}

L’écran de chargement

J’ai fait tout ce que j’ai pu, mais maintenant la musique et le CSS ont leur propre durée, il est donc impératif que les images et la musique soient complètement chargées et prêtes à se lancer au démarrage. Nous avons donc besoin d’un écran de chargement (et puis c’est bien de prévenir les gens que vous allez leur envoyer de la musique dans les oreilles, peu importe à quel point elle est magnifique).

Puisque nos deux lignes de temps sont étroitement liées, nous ferions mieux de ne pas jouer l’animation avant le lancement de la musique.

 * { animation-play-state: paused; }

aniamtion-play-state peut être paramétrée en paused ou running, et c’est le truc le plus utile que vous apprendrez aujourd’hui.

Premièrement, nous utilisons un event listener pour voir quand le navigateur estime que nous pouvons lire le morceau du début à la fin sans pause ou saccade :

 byakkoya.addEventListener(« canplaythrough », function () { });

 (En savoir plus sur l’audio event en HTML 5 sur HTML5.doctor.com)

Dans notre event listener, j’utilise un peu de Jquery pour ajouter la class .playable au body quand nous sommes prêt à cliquer sur play.

$(« body »).addClass(« playable »);
$(« #play-me »).html(« Play me. »).click(function(){
song(byakkoya);
$(« body »).addClass(« playing »);
});

Cette class .playing est spéciale car elle démarre l’animation au moment où la musique se lance :

.playing * { animation-play-state: running; }

Le fond

Nous avons presque fini ! Quand nous ajoutons le fond, nous avons besoin que le défilement accélère quand Tuna se met à courir. La musique prend de la vitesse à 24.75 secondes, nous allons donc également utiliser animation-delay sur ces fonds.

Ça va nécessiter quelques maths. Si vous essayer simplement d’écourter la durée de l’animation à 24,75 secondes, le fond va, à mi-chemin, retourner à sa position initiale pour commencer la nouvelle animation.

Voilà la formule :

Nouvelle valeur à 0% = délai / ancienne durée (duration) * longueur de l’image

Nouvelle valeur à 100 % = nouvelle valeur à 0% + longueur de l’image

Ici la formule en action sur une petite mesure :

VOILÀ* ! L’ANIMATION TERMINÉE !

J’ai toujours voulu voir mes illustrations devenir vivantes. Je me suis donc levée un matin et j’ai réalisé que j’avais tous les outils nécessaires dans mon navigateur et dans ma tête. Maintenant je suis tombée amoureuse de l’animation sans Flash (Flashless animation).

Je suis sûre qu’il y aura des détracteurs qui diront qu’HTML n’était pas conçu pour ça et que c’est un gros abus des DOM ! Mais je leur rétorque que l’exploration nous aide à élargir nos attentes vis-à-vis du matériel et des logiciels, et que ça nous motive favorablement en tant qu’artiste et développeur. Le navigateur ne doit pas être l’endroit le plus approprié pour l’animation, mais c’est certainement un endroit drôle pour commencer.

On peut faire tellement de choses avec les spécifications implémentées aujourd’hui, et il y en a tant d’inexplorées. Je n’ai pas encore commencé à tout vous montrer. Dans huit mois, je m’attends à ce que cette démo représente la norme, et non un âge maudit. Je suis impatiente de voir les merveilleuses choses que vous créerez.

(Eh, quelqu’un, faites quelque chose à propos des boucles audio HTML 5. C’est une honte ! )

*en français dans le texte

 

Le billet original de Rachel Nabors sur 24 ways (en anglais)

L’article de Chris Mills sur d’autres techniques d’animation CSS 3 (en anglais)

9 réponses à Tuto : animation sans Flash avec HTML 5 et CSS 3

  • Le 19 février 2014 at 00:33 Fredouille a dit :

    Bonjour,
    Je tiens tout d’abord à vous remercier de m’avoir fait découvrir cette merveilleuse fonctionnalité qu’est la propriété anime, que j’ai de suite mise en pratique et qui fonctionne à merveille.
    Je tiens à vous informer que la position height de la dernière animation ne doit pas correspondre à la taille de l’image mais à la position d’origine du dernier sprite, cad height – sprite-height, et de réduire donc d’un step l’animation, faute de quoi l’image sera vide une fois arrêtée.
    Merci d’effectuer la correction dans le css de vos exemples =).
    Bonne continuation.

  • Le 6 mai 2014 at 18:58 Gad a dit :

    hé bien je reste époustouflé par votre article et je suis d’accord avec vous quand vous dites que le web est aussi un lieu d’expérimentation aux artistes et qui veulent se mesurer a l’animation sans passer par ces langages trop longs ,fastidieux qui les détournent de leur premier objectif,créer,dessiner et mettre en mouvement leur belles choses sur des pages web!j’avoue que je n’ai pas trop compris votre cours puisque je suis nul nouvellement venu vers le html, j’aurai aimé juste que vous me dites comment mettre ce code dans un code html et a quel niveaux des balises,!mon soucis ne réside pas dans la réalisation d’un mouvement quelconque,cela je le fais aisément et jle traite sur photoshop que je généré en gif ou jpeg ,pour le son,je ne suis pas encore arrivé là,mais ce serai mon rêve !en attendant votre article j’le mets dans mon »marque pages » en attendant de comprendre tout!merci encore pour ce que vous venez de me monter,amicalement Djamel

  • Le 26 octobre 2014 at 17:51 Valéry a dit :

    C’est excellent, bravo, continuez. Et merci :)

  • Le 2 janvier 2015 at 00:17 Brice a dit :

    C’est troooop génial !! C’est exactement ce que je recherchais ^^ J’ai toujours voulu donner vie à mes dessins moi aussi et cette façon de faire me semble très riche de possibilités !! Trop content ! Merci infiniment pour cet article plein d’espoir pour moi, et très bien écrit en plus ! :)

  • Le 18 janvier 2015 at 19:04 tchikaya a dit :

    grand merci et toutes mes félicitations!

  • Le 31 mars 2015 at 02:48 Lolfish a dit :

    bonjour,

    pour ma part j’utilise ce systeme d’animation de frames pour le background de mon blog
    (http://www.lolfish.fr) il s’agit des vagues qui bougent derrière le logo.

    mais comme vous pourrez le remarquer, il y a parfois des sautes, et je ne sais pas d’où cela peut bien venir. Je suis actuellement en train de créer un site sous wordpress, et le problème est le même (j’ai d’ailleurs un peu rendu le code plus propre).

    Sur chrome il y a la première saute après 15 secondes puis toutes les 8/9 secondes, sur mozilla je n’ai pas de saute, et sur IE je n’ai ni dégradé ni animation. (mais j’ai peut être une version pas à jour..)

    Sauriez-vous d’où cela peut provenir ? :/

    • Le 12 octobre 2015 at 20:54 TITI a dit :

      à mon avis c’est les navigateurs qu bug et qu empêchent de voir les images correctement

  • Le 12 octobre 2015 at 20:53 TITI a dit :

    C’EST TROP GENIAL!! CEST MERVEILLEUX!! BRAVO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • Le 2 décembre 2015 at 21:22 temps a dit :

    Bonjour,
    Belle réalisation, il va falloir que je regarde comment ça marche.
    Je vais quelque chose qui y ressemble mais d’une manière différente.
    C’est ici : http://www.letime.net/alpha/banque/

    Cordialement

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>