Les transitions CSS

Si jusqu'ici nous avons vu des styles CSS qui peuvent métamorphoser l'affichage de nos objets de fond en comble, je peux vous garantir que ce cette partie est la plus amusante de toutes. En effet, à partir de là, on peut créer des animations, et en plus, avec du code infiniment simple.

Les transitions CSS permettent le passage d'un objet d'un état à un autre d'une manière progressive créant ainsi une animation. Pour être plus précis, ce type d'animation s'appelle Interpolation de mouvement.

L'interpolation de mouvement est un principe qui ne date pas d'hier. En effet, il simplifie nettement la création des séquences animées en ne fournissant qu'un nombre limité d'images (qu'on appelle des images clé), et le processus se charge en suite d'en déduire les images intermédiaires.

Adobe Flash (anciennement Macromedia Flash) est le logiciel le plus populaire pour avoir pris en charge cette technique pour créer les animations destinées au Web. Mais, l'interpolation de mouvement est aussi utilisée au cinéma.

En CSS, on a souvent recours aux transitions avec les pseudo-classes. Par exemple, après avoir survolé un objet, celui ci se met à bouger pour correspondre aux styles définis par :hover.

Pour mieux comprendre de quoi il s'agit nous allons créer un objet et nous allons définir son état survolé (grâce à :hover) deux fois, une sans transition et l'autre avec transitions.

Survolez le premier carré orange puis le deuxième et jugez par vous même.
Vous comprenez maintenant c'est quoi une transition? Parfait.

Propriété transition-property

Supposons que nous avons créé un objet dont on a défini l'arrière plan (propriété background) et la bordure (propriété border), puis nous avons créé des styles appliquées à une pseudo-classe de cet objet (:hover par exemple) qui changeront l'arrière plan et la bordure déjà définis. Si on applique une transition entre l'état initial et l'état survolé, on imagine que l'arrière plan et la bordure se mettront à s'animer pour correspondre aux styles définis à :hover. Cependant, CSS permet de désigner quels sont les propriétés qui devront subir la transition et quels sont celles qui ne s'animeront pas. Il s'agit de la propriété transition-property.

La propriété transition-property accepte comme valeur le nom (ou la famille) de styles sur lesquelles la transition sera appliquée.

Par exemple:
Comme vous le constatez en passant de l'état initial à l'état survolé, la bordure et l'arrière plan de la balise <div> changeront, mais seule l'arrière plan subira la transition alors que la bordure changera instantanément.

Par contre, si on avait mis transition-property:all, dans ce cas toutes les propriétés auraient subit la transition.

Propriété transition-duration

Comme son nom l'indique la propriété transition-duration permet de spécifier la durée de la transition (la durée que mettra l'animation pour aller de l'état 1 à l'état 2). Elle est exprimée en secondes.

Exemple:
Dans ce cas, l'animation fera une demi seconde. Comme pour la propriété transition-property il faut prévoir le préfixe vendeur à transition-duration.

Propriété transition-timing-function

La fonction transition-timing-function permet de définir la cadence avec laquelle la transition sera faite. Elle permet de changer la vitesse de la transition au long de sa durée (on parle de la courbe d'accélération). Les valeurs que cette propriété peut accueillir sont:

• ease: le mouvement est rapide au début puis ralentit petit à petit jusqu'à l'arrêt complet.
• linear: le mouvement garde la même vitesse du début à la fin de la transition.
• ease-in: le mouvement commence lentement puis gagne en vitesse avec le temps.
• ease-out: le mouvement est rapide au début puis ralentit à la fin (le ralenti avec ease-out est moins senti qu'avec ease).
• ease-in-out: le mouvement commence lentement et fini lentement, mais il est plus rapide au milieu de la transition.

Il existe d'autres valeurs mais en général c'est ease qui est utilisé car elle donne un effet plus spectaculaire à la transition.
Exemple:
Notez qu'on peut regrouper les propriétés de la transition dans une seule qui est transition. Le dernier code CSS devient alors:
N'oublier pas de prévoir le préfixe vendeur pour que le code soit compatible avec les anciens navigateurs.

Propriété transition-delay

La propriété transition-delay permet de retarder le début de la transition lorsque l’événement qui la déclenche est détecté.

Exemple:
Dans ce cas, si on survole la DIV, la transition ne commencera qu'une seconde après.

Je vous montre maintenant le code du carré orange qui devient un cercle bleu du début de cette page:

Code HTML:
Code CSS:
Ce qui donne le résultat de tout à l'heure:

Exemple: menu accordéon

On va essayer de mettre en pratique les transitions CSS. L'objectif est de créer un menu dit accordéon. C'est un menu de navigation dont les entrées s'allongent et se rétractent comme le soufflet d'un accordéon. Pour faire simple on va agir sur l'épaisseur de la bordure de chacun des éléments constituant le menu. Associé aux transitions, la bordure changera d'épaisseur progressivement ce qui fera penser à un accordéon en action.

Voici le code HTML:
Code CSS:
Résultat obtenu:

Les transitions en vidéo