Une animation CSS3 : l'avionFlux RSS

Publié le 02/11/2011 à 16:04 dans la catégorie Programmation Web.
Tags : css3, animation.
4 commentaires.

Introduction

Après les transitions CSS3, les animations du même langage se présentent comme une alternative sérieuse à Flash. Cette nouvelle technologie, malheureusement trop peu implémentée dans nos navigateurs à l'heure actuelle, permet en effet de créer facilement des animations en HTML/CSS.

Afin d’égailler un peu notre page de contact, nous avons développé une animation d’un avion survolant le cadre du google map. Certains d’entre vous on peut être eu l’occasion de le voir passer, l’animation ne se déclenche que 30 secondes après votre arrivée sur la page. A l’occasion de la mise en ligne du nouveau site Infoject’, je vous propose un article pour reproduire cette animation.

Note :

La mise en application de cet article nécessite toutefois d’avoir quelques connaissances en HTML/CSS notamment dans la gestion des sprites.

Petit rappel:
Un sprite se compose d’une série d’images regroupées en un seul fichier dans le but soit d’animer un élément soit d’économiser le nombre de requêtes vers le serveur (ou encore mieux, les deux).

Avant toute chose, nous allons avoir besoin d’un avion. Je ne compte pas détailler la création de ce dernier sous Photoshop et je vous invite à récupérer l’image ci-après.

Sprite avion

Attachez vos ceintures

Ici notre but est bien sûr d’animer notre avion et plus particulièrement la rotation de l’hélice. L’image est donc divisée en 5 partie de 100px*100px.

Sprite avion

L’animation va consister à changer la position de l’image de fond pour afficher les étapes successives de la rotation de l’hélice, nous appelerons cette animation airplanePropeller (définie ci-dessous par le mot-clé @keyframe). On va donc jouer sur la propriété background-position en la faisant varier de 0px à 500px puis de 500px à 0px. Pour ce faire, nous aurons deux états :


@keyframe airplanePropeller{
    from{background-position:0px 0px;}
    to{background-position:500px 0px;}
}

On fait ainsi varier la position de 0 à 500, pour obtenir la variation inverse (de 500 à 0) nous définirons la direction de l’animation à "alternate", on obtient ainsi l'affichage successif des images 1 à 5 puis 5 à 1.

Le changement de position doit s’effectuer sans transition (on simule ici l’affichage de trames), nous allons donc définir la propriété animation-timing-function à "steps(5, start)" afin de préciser que l’animation se déroule sur 5 étapes et que la position à appliquer est celle définie au départ de la transition entre les étapes (start). On applique ainsi l'animation au div #aiplane en ajoutant à ses propriétés le code suivant :


animation-name: airplanePropeller;
animation-duration: .2s;
animation-iteration-count:infinite;
animation-direction: alternate;
animation-timing-function: steps(5, start);

On obtient ainsi un avion avec une hélice qui tourne !

Tournez manèges

Sprite avion

Voyons maintenant comment faire voler notre avion. Dans un premier temps on se contentera d’avoir un avion tournant en rond.

Nous allons donc utiliser une autre propriété CSS3, à savoir transform avec une valeur rotate variant de 0 à 360 degrés. Nous commençons par changer le point d’origine de la transformation (par défaut le centre du div #airplane), nous allons donc définir la propriété transform-origin à "-50px center" pour positionner notre origine à 50px à droite de l’avion (à gauche sur l’écran) mais toujours au centre de ce dernier verticalement.


transform-origin:-50px center;

L’animation va consister à changer la valeur de la propriété transform de "rotate(0deg)" à "rotate(360deg)" soit un tour complet.


from{transform:rotate(0deg);}
to{transform:rotate(0deg);}

Ça plane pour moi

Vous l’aurez remarqué (ou pas) dans cette dernière animation, notre avion plane puisque son hélice ne tourne pas. Hors il me semble que nous nous sommes penché sur la question précédemment. Il est possible de définir plusieurs animations simultanément sur un même élément HTML. Nous allons donc fusionner les deux animations précédentes, rien de plus simple, il suffit de définir les différentes propriétés css animation (name, duration, iteration-count, direction et timing-function) en séparant les valeurs par des virgules.


animation-name: airplanePropeller, airplaneMoving;
animation-duration: .2s, 10s;
animation-iteration-count:infinite, infinite;
animation-direction: alternate, normal;
animation-timing-function: steps(5, start), linear;

Modification du plan de vol

Il est possible de créer des trajectoires plus complexes, nous allons donc changer notre cercle pour un ∞. Les modifications à apporter son mineures. En effet nous allons simplement changer l’origine de la rotation de 50px à droite pour le placer 50px à gauche dès la fin du premier cercle. Nous allons créer une troisième animation qui s’occupera de la modification du point d’origine.

Attention, lors de la seconde rotation (deuxième boucle du ∞), la rotation est antihoraire. Nous devons alors modifier l’animation qui effectue la rotation et changer sa direction en "alternate" afin qu’elle dessine la rotation dans un sens puis dans l’autre.

Sprite avion
#airplane{
    width:100px;
    height:100px;
    background-image:url(http://www.infoject.fr/images/theme/th_sp_airplane.png);
    background-position:0px 0px;
    margin-left:200px;
    margin-top:100px;

    animation-name: airplanePropeller, airplaneMoving, airplaneCenter;
    animation-duration: .2s, 5s, 10s;
    animation-iteration-count:infinite, infinite, infinite;
    animation-direction: alternate, alternate, normal;
    animation-timing-function: steps(5, start), linear, steps(2, end);
}

/* Animation de l'hélice */
@keyframes airplanePropeller{
    from{background-position:0px 0px;}
    to{background-position:500px 0px;}
}

/* Animation de la rotation */
@keyframes airplaneMoving{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

/* Animation de l'origine de la rotation */
@keyframes airplaneCenter{
    0%{transform-origin:-50px center;}
    100%{transform-origin:300px center;}
}

Chronologie

Cette partie porte sur les durées définies pour les 3 animations. En effet, airplanePropeller (animation de l'hélice) est définie sur 0.2s alors que airplaneMoving (animation en cercle) est définie sur 5s et enfin airplaneCenter (animation du centre de rotation) est définie sur 10s.

L'animation complète dure 10s, durant ces 10s airplanePropeller s'exécute 25 fois dans le sens normal et 25 fois dans le sens inverse dû à la propriété animation-direction définie à alternate. airplaneMoving, quant à elle, s'exécute une fois dans le sens normal (rotation horaire) et une fois dans le sens inverse (rotation antihoraire), toujours de par la valeur de la propriété animation-direction. Pour finir, airplaneCenter ne s'exécute qu'une fois, elle est divisée en deux étapes (voir la propriété animation-timing-function) :

  • La première de 5s durant laquelle le centre se trouve à droite de l'avion (par rapport au pilote).
  • La seconde de 5s également durant laquelle le centre se trouve à gauche de l'avion.

Voici un petit schéma pour vous aider à mieux comprendre la chronologie des animations :

Sprite avion
  1. Première éxécution de l'animation airplaneMoving dans le sens horaire.
  2. Deuxième éxécution de l'animation airplaneMoving dans le sens antihoraire.
  3. À la 5ième seconde le centre de rotation change pour se placer à droite.

Compatibilité & support

Les animations CSS3 sont supportées par les principaux navigateurs, sauf Internet Explorer pour lequel il faudra attendre la version 10 (d'après Microsoft) et Opéra (aucune donnée trouvée à ce sujet). L'utilisation des préfixes devant les déclarations est obligatoire pour tous ces navigateurs à l'heure actuelle.

Firefox Chrome Opera Safari Internet Explorer
Avec le préfixe -moz- Avec le préfixe -webkit- Pas dans la version 11.52 avec le préfixe -o- Avec le préfixe -webkit-. La valeur step(X,[start|end]) n'est pas suportée correctement. Version 10 avec le préfixe -ms-

Conclusion

Ainsi il est possible de créer des animations complexes relativement facilement en CSS. Cette nouvelle technologie nous laisse entrevoir de nouveaux horizons notament dans le remplacement de Flash, non implémenté sur plusieurs appareils mobile (notament les produits Apple). Cependant, les spécifications des animations CSS3 ne sont toujours pas validées et par conséquent pas encore implémentées dans tout les navigateurs ou utilise des préfixes propriétaires.