• 6 heures
  • Moyenne

Mis à jour le 12/02/2019

Les transitions CSS

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Les transitions en CSS : voilà je pense un sujet qui va intéresser du monde ! Auparavant, il fallait programmer en JavaScript des fonctions parfois complexes pour pouvoir faire bouger des éléments sur la page. Aujourd'hui, grâce à CSS3, il est possible d'effectuer des animations avec quelques lignes de CSS à peine !

Les transitions nous permettent de modifier de façon progressive tout un tas de propriétés d'un objet. Voici par exemple ce qu'on peut faire :

Une transition tout en CSS !
Une transition réalisée en CSS !

Avez-vous vu toutes les propriétés qui changent lors de cette animation ? Il y a évidemment background-color, width et height, mais aussi box-shadow et border-radius ! Tout ça se fait en fait très simplement en quelques lignes de CSS.

Avant de commencer, il faut bien que vous distinguiez ces deux notions différentes en CSS :

  • Les transitions : c'est une animation basique qui fait passer un objet d'un état A à un état B. Par exemple, on peut dire : "Déplace cet objet de la gauche vers la droite de l'écran tout en changeant sa couleur". L'image que vous venez de voir représente une transition : tout bouge en même temps.

  • Les animations : c'est une combinaison de transitions les unes à la suite des autres. Par exemple, on peut dire : "Déplace cet objet de la gauche vers la droite de l'écran puis déplace-le vers le bas de l'écran puis change sa couleur de fond vers le bleu."

Dans ce chapitre, nous allons  découvrir les transitions. Nous serons ensuite capables de faire des animations dans le chapitre suivant. :)

Les bases des transitions CSS

Vous connaissez déjà un grand nombre de propriétés CSS qui permettent de modifier l'apparence d'un élément : color pour la couleur du texte, background-color pour la couleur de fond, width pour la largeur d'un bloc, etc.

Un très grand nombre de ces propriétés peuvent être animées avec le système des transitions en CSS3. Vous avez besoin de connaître au minimum ces deux propriétés :

  • transition-property : indique quelle propriété CSS est animée.

  • transition-duration : indique combien de temps dure l'animation.

Concrètement, comment est-ce qu'on applique ces propriétés ?

Prenons un code HTML encore une fois très basique, constitué d'un simple bloc <div> :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Transitions et animations</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <div></div>
    </body>
</html>

Ajoutons-lui quelques propriétés CSS de base et lors du survol :hover :

div
{
    width: 200px;
    height: 150px;
    background-color: blue;
}

div:hover
{
    background-color: green;
}

Cela nous donne un élément bleu qui devient vert au survol. Jusque-là c'est très classique.

Ajoutons-y maintenant la transition sur background-color pour indiquer qu'on doit animer l'objet progressivement du bleu vert le vert :

div
{
    width: 200px;
    height: 150px;
    background-color: blue;
    transition-property: background-color; /* Active la transition sur background-color */
    transition-duration: 1s; /* La transition dure 1s */
}

div:hover
{
    background-color: green;
}

En voyant ça, l'ordinateur comprend qu'il va devoir animer la propriété background-color progressivement dès qu'elle change de valeur. Lors du survol (:hover ), elle change de valeur, donc l'ordinateur l'anime (ici sur 1 seconde).

Une transition basique d'une couleur à une autre
Une transition basique d'une couleur à une autre.

Essayez !

Vous pouvez appliquer la transition sur plusieurs propriétés en même temps en les espaçant par des virgules :

div
{
    transition-property: background-color, width, height;
}

Sachez aussi que vous pouvez indiquer une durée de transition en ms (millisecondes) au lieu des secondes :

div
{
    transition-duration: 250ms;
}

Configurer sa transition

Allez hop, j'ajoute deux nouvelles propriétés CSS à votre arc :

  • transition-delay : indique au bout de combien de temps commence l'animation.

  • transition-timing-function : indique quel type de transition on veut voir. D'une certaine façon, cela détermine quelle est "l'accélération" de l'effet d'animation.

transition-delay : délai avant le lancement de la transition

Commençons par transition-delay . Le principe est à la base très simple : cela vous permet de retarder le début de la transition. Par exemple, ici, je vais faire en sorte que la transition commence au bout de 0,4s seulement :

div
{
    width: 200px;
    height: 150px;
    background-color: blue;
    transition-property: background-color;
    transition-duration: 1s;
    transition-delay: 0.4s; /* Démarre au bout de 0,4s */
}

div:hover
{
    background-color: green;
}

Résultat :

La transition ne s'active qu'au bout d'un délai
La transition ne s'active qu'au bout d'un délai

transition-timing-function : l'accélération de l'animation

Les choses se compliquent un peu avec transition-timing-function. Cette propriété indique comment l'objet doit transiter d'un état à un autre. Et vous avez l'embarras du choix.

Les valeurs prédéfinies possibles sont :

  • ease : rapide au début et ralenti à la fin.

  • linear : vitesse constante.

  • ease-in : lent au début et accélère de plus en plus à la fin.

  • ease-out : rapide au début et de plus en plus lent à la fin.

  • ease-in-out : départ et fin lents.

Essayons un effet "ease" sur une translation (déplacement) :

div
{
    width: 200px;
    height: 150px;
    background-color: blue;
    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: ease; /* Transition de type ease */ 
}

div:hover
{
    transform: translateX(200px); /* On déplace l'objet */
}
Une transition de type
Une transition de type "ease"

Pour comparer, je vous mets la même transition, de type "ease-in" cette fois :

Une transition de type
Une transition de type "ease-in"

Si vous regardez bien, vous verrez la différence. :)

Personnaliser finement la transition avec cubic-bezier()

Il est possible d'aller encore plus loin en définissant sa propre fonction de transition transition-timing-function avec cubic-bezier(). Là encore, il y a des maths derrière ! Il s'agit des courbes de bézier, qui vont permettre de paramétrer finement la fluidité des animations. Voici une courbe :

La courbe de bézier permet de définir la fluidité de l'animation
La courbe de bézier permet de définir la fluidité de l'animation

Cette courbe indique qu'au début l'animation démarre assez vite (parce que la courbe monte vite), au milieu elle ralentit et à la fin elle accélère à nouveau.

La courbe de bézier se définit avec 4 points comme ceci :

#cubic-bezier
{
    transition-timing-function: cubic-bezier(.43,-0.83,.53,1.73);
}

Pour vous permettre de tester, j'ai créé une page avec les différents effets de transitions de base (+ un cubic-bezier personnalisé) : essayez les transitions !

La super-propriété transition

Ça fait beaucoup de propriétés à retenir non ? Heureusement, il existe une super-propriété qui combine toutes ces autres propriétés : transition.

div
{
    /* Transition "ease" de 2s sur background-color */
    transition: background-color 2s ease;
}

C'est la propriété que j'utilise le plus souvent au quotidien, le code est plus concis.

Sachez qu'il est aussi possible d'avoir deux effets de transition en parallèle avec des paramètres différents. Il suffit de les séparer par des virgules :

div
{
    /* Transition "ease" de 2s sur background-color 
    et transition linéaire de 1s sur la largeur en parallèle */
    transition: background-color 2s ease, width 1s linear;
}

Voilà, vous savez maintenant tout ce qu'il faut sur les transitions ! :)

Exemple de certificat de réussite
Exemple de certificat de réussite