Le Post de MCNEXT

Il n’est un secret pour personne que la nouvelle norme HTML5, et la norme CSS3 qui l’accompagne, ont pour objectif de rendre à terme obsolète l’utilisation de plugins tiers comme Flash ou Silverlight. A ce titre, une nouvelle API permettant d’animer les éléments d’une page web est actuellement en cours de normalisation par le W3C, l’organisme en charge de mettre au point les nouveaux standards de demain.

Cette nouvelle API, bien qu’actuellement à l’état de brouillon et disséminée dans plusieurs modules de la norme CSS3, a déjà été largement implémentée dans les dernières versions des navigateurs que nous connaissons tous (à l’exception d’Internet Explorer 10 qui se fait attendre) et est donc d’ores et déjà exploitable.

Nous allons étudier chacune des nouveautés qui nous permet d’animer nos sites. Notez néanmoins que bien que les différents acteurs du monde du web se soient déjà mis d’accord sur une syntaxe commune, l’utilisation de préfixes CSS est encore pour le moment d’usage. Le but de ceux-ci est de permettre aux développeurs d’être en mesure de différencier les différents navigateurs, afin de pouvoir effectuer le cas échéant de menus réglages.

Par soucis de brièveté, dans les exemples qui suivront ces différents préfixes seront omis pour ne conserver que la syntaxe qui devrait devenir définitive à terme.

Les transformations

Tout d’abord, de nouvelles propriétés CSS3 vont nous permettre de transformer nos éléments HTML de manière inédite. Pour cela, on utilise la propriété CSS transform associée à une fonction de transformation. Ces fonctions de transformation vont nous permettre par exemple de modifier les dimensions de l’élément (translate / translate3d), de le faire pivoter sur lui-même (rotate / rotate3d) sur un ou plusieurs de ses axes, de l’étirer (skew) ou d’appliquer une transformation matricielle (matrix / matrix3d). Comme vous le voyez, la plupart de ces transformation existent en version 2D ou 3D. Par ailleurs, il est généralement possible de les appliquer sur un seul axe à la fois, avec par exemple rotateX, rotateY et rotateZ.

.mon-element {
    /* L'élément pivotera de 30 degrés dans le sens horaire */
    transform: rotate(30deg);
}

Notez – et c’est important – que toutes ces transformations se font à la fois sur l’élément et son contenu, que le flux d’affichage de la page n’est pas modifié et que cette opération se fait à un niveau graphique. Par exemple lors d’un étirement, le texte inclus dans l’élément sera lui aussi transformé.

La propriété CSS transform s’accompagne de plusieurs autres propriétés permettant de préciser certains éléments d’affichage. Par exemple, la propriété transform-origin permet d’indiquer à partir de quel point de l’élément la transformation doit s’appliquer. Si l’on reprend notre précédent exemple de la rotation, on peut ainsi préciser que celle-ci doit s’appliquer non pas sur le centre de l’élément – comme c’est le cas par défaut – mais par exemple à dix pixels de haut et dix pixels de large de son coin supérieur gauche.

.mon-element {
    transform: rotate(30deg);
    /* La transformation s'appliquera avec un point d'origine différent */
    transform-origin: 10px 10px;
}

Lorsque la transformation s’applique en trois dimensions, il est possible avec la propriété backface-visibility de préciser si l’on souhaite ou non que le dos de l’élément soit visible. La propriété perspective permet quand à elle de modifier la perspective selon laquelle un objet est perçu dans l’espace.

La transformation en elle-même se fait sans effet d’animation. Il est néanmoins possible de rendre cette transformation dynamique en utilisant les pseudo-éléments CSS comme :hover ou :focus.

a.mon-lien:hover {
    /* Multiplie par deux la largeur et la hauteur de l'élément
       lorsque le curseur de la souris le survole */
    transform: scale(2,2);
}

Les transitions

Il est courant dans une page web de vouloir modifier dynamiquement l’apparence d’un élément, que ce soit ses dimensions, la taille du texte qu’il contient, ou ses couleurs. Toutefois, ces opérations se faisaient jusqu’à maintenant en Javascript, et elles étaient généralement assez abruptes (sauf à utiliser des moteurs d’animation comme celui de jQuery). Le changement de couleur de fond d’un élément se faisait par exemple instantanément.

Grâce à la nouvelle propriété CSS3 transition, il est maintenant possible de préciser que l’on souhaite que certaines caractéristiques d’un élément changent progressivement lorsque celles-ci sont altérées. Concrètement, lorsque par exemple on modifie la largeur d’un élément de 100 pixels à 200 pixels, il est possible d’indiquer au moteur de rendu du navigateur que la transition entre ces deux états doit se faire en passant par tous les états intermédiaires (les valeurs entre 100 et 200), et non pas instantanément. L’utilisation de Javascript devient alors caduque, car tout se fait en CSS.

La déclaration de ces effets de transition s’effectue en indiquant à quelle propriété elle s’applique, et combien de temps doit durer la transition. Il est possible de cumuler plusieurs propriétés dans la même déclaration, comme on le voit dans l’exemple suivant :

.mon-element {
    transition: width 2s, height 2s, transform 2s;
}

Il est possible d’appliquer ces effets sur n’importe quelle propriété CSS. Lorsque la valeur de l’une de celles-ci sera altérée, de quelque manière que ce soit (Javascript, pseudo-element CSS, …), si un effet de transition a été appliqué à l’élément, alors la transition se fera automatiquement selon les paramètres spécifiés.

On peut également préciser directement dans la propriété transition ou par le biais de la propriété transition-timing-function un effet "d’assouplissement" (en anglais : easing), permettant d’altérer la manière dont la transition va s’appliquer dans le temps. Par exemple, on peut indiquer que l’on souhaite que la transition commence très rapidement, puis ralentisse sur la fin. Pour cela il existe déjà plusieurs mots-clefs standardisés (linear, ease, ease-in, ease-out, ease-in-out), mais on peut également utiliser la fonction cubic-bezier pour avoir un contrôle plus fin sur ce timing. Vous pouvez d’ailleurs vous amuser à tester différents effets sur ce site.

.mon-element {
    transition: width 3s cubic-bezier(.99, .01, -.01, .01);
}

Dernière possibilité offerte par la propriété transition-delay : différer le lancement de la transition. Comme la durée de la transition elle-même, la valeur de cette propriété peut être indiquée en secondes (s) ou en millisecondes (ms).

Dans l’exemple suivant nous appliquons un effet de transition en utilisant séparément chacune des propriétés CSS3 distinctes, plutôt qu’en les rassemblant par le biais de la propriété transition :

.mon-element {
    transition-property: font-size;
    transition-duration: 5s;
    transition-timing-function: ease-in-out;
    transition-delay: 1000ms; /* Équivalent à 1 seconde */
}

Cette effet de transition s’appliquera donc sur la propriété font-size (la taille des caractères autrement dit), il durera cinq secondes mais ne commencera qu’une seconde après que la propriété ait été altérée. Par ailleurs l’effet s’effectuera selon le timing ease-in-out (légèrement plus rapide au début et à la fin).

Voici un exemple de code Javascript modifiant la valeur du style CSS font-size d’un élément. Ce code permettrait de provoquer l’exécution de l’effet de transition :

document.getElementsByClassName('mon-element')[0].style.fontSize = '48px';

Les animations

Les animations avec CSS3 sont cousines des transitions, à l’exception qu’elles peuvent être répétées en boucle, et qu’elles offrent un contrôle plus fin sur la manière dont va évoluer l’apparence des éléments du DOM.

A la base d’une animation, il y a la notion de keyframe. Une keyframe n’est pas une propriété CSS mais une règle. Elle permet d’indiquer la suite d’états par lesquels l’élément du DOM va transiter au cours de l’animation.

@keyframes mon-animation {
    0% {
        background-color: red;
    }

    25% {
        background-color: green;
    }

    75% {
        background-color: blue;
    }

    100% {
        background-color: yellow;
    }
}

Dans cet exemple, nous indiquons que l’élément auquel sera appliquée l’animation devra avoir un fond de couleur rouge au début de celle-ci, puis vert au premier quart, puis bleu au troisième quart, puis jaune à la fin. Les mots-clefs from et to peuvent remplacer respectivement 0% et 100%, mais n’importe quelle valeur entre 0 et 100 est aussi acceptée.

Ensuite pour appliquer cette animation à un élément, on utilise la propriété animation proprement dite :

.mon-element {
    animation: mon-animation 5s;
}

Le minimum est d’indiquer la durée souhaitée de l’animation. Mais il est également possible, comme pour les transitions, d’indiquer un effet d’assouplissement, et un délai d’attente avant le lancement de l’animation. Par ailleurs, les animations disposent également des propriétés animation-iteration-count et animation-direction. La première permet d’indiquer combien de fois l’animation doit s’effectuer (on peut utiliser le mot-clef infinite pour que celle-ci tourne en boucle), et la seconde, si l’animation doit s’effectuer toujours dans le même ordre (mot-clef normal), ou si celui-ci doit s’inverser entre deux itérations (mot-clef reverse), ce qui s’avère très pratique lorsque l’on veut par exemple faire tourner un élément dans un sens puis dans l’autre.

.mon-element {
    animation: mon-animation 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Les animations disposent enfin d’une dernière propriété : animation-play-state. Celle-ci permet de contrôler l’exécution de l’animation, avec la possibilité de mettre celle-ci en pause pour la continuer plus tard. Cela permet donc d’imaginer des scénarios où l’utilisateur peut piloter l’exécution de l’animation grâce au Javascript ou aux pseudo-éléments CSS.

.mon-element {
    animation: mon-animation 5s;
    animation-play-state: running;
}

.mon-element:hover {
    animation-play-state: paused;
}

Pour aller plus loin

Si vous souhaitez consulter la documentation complète des transformations, transitions et animations en CSS3, je vous recommande chaudement l’excellent site W3Schools. Vous pourrez y consulter des démonstrations, mais aussi créer les vôtres grâce à un système de bac-à-sable interactif très bien conçu qui vous permettra de vous entraîner à maîtriser toutes ces nouvelles propriétés.

Avec tout cela il devient beaucoup plus simple d’animer nos pages web. Toutefois, la création d’animations complexes reste fastidieuse à réaliser sans outils dédiés. On peut noter l’arrivée prochaine du nouveau logiciel Adobe Edge, qui est d’ores et déjà disponible en version béta, et dont l’objectif est précisément de permettre la création de contenu web animé en utilisant les nouveaux standards HTML5, CSS3 et le langage Javascript.