Cet article est la réunion de deux articles de Louis Lazaris sur les transitions CSS3.

La façon la plus courante d'utiliser les transitions CSS3 est en association avec la pseudo-classe :hover.

Voici une transition typique, en pur CSS, qui modifie la couleur d'un lien lorsqu'on passe la souris :

a, a:link, a:visited {
    color: lightblue;
    transition: color .4s linear;
}

a:hover {
    color: white;
}

On anime la propriété color quand on passe la souris sur un lien, c'est très simple et vous l'avez sans doute déjà vu ou utilisé. Mais l'utilisation des transitions n'est pas limitée à :hover.

Vous pouvez animer les propriétés CSS grâce à des transitions qui utilisent d'autres techniques CSS, dont voici quelques-unes.

Transition avec :active

La pseudo-classe :active cible tout élément qui est en cours d'activation. La façon la plus simple d'activer un élément est de cliquer dessus, c'est le mouse down.

Le CSS qui suit et la démo qui l'accompagne montrent l'utilisation de :active avec une transition CSS3 qui imitent un événement mousedown :

.box {
    width: 300px;
    height: 300px;
    background: #222;
    transition: width 2s ease, height 2s ease;
}

.box:active {
    width: 500px;
    height: 500px;
}

Avec ce code, la largeur et la hauteur de la boîte sont animées lorsque vous maintenez le bouton de votre souris enfoncé. Lorsque vous relâchez le bouton, la boîte s'anime pour revenir à ses dimensions d'origine. Voici la démo.

Transition avec :focus

Vous pouvez utiliser la pseudo-classe :focus pour réaliser une animation similaire. Cette fois-ci, nous allons utiliser un formulaire dans lequel nous animerons la largeur de tout élément qui reçoit le focus :

input, textarea {
    width: 280px;
    transition: width 1s ease;
}

input:focus, textarea:focus {
    width: 340px;
}

Et voici la démo.

Transition avec :checked

Vous pouvez animer des checkboxes et des boutons radio lorsqu'ils sont “checkés” - même si l'impossibilité de changer réellement leur style impose des limitations.

Nous changerons simplement la largeur, comme si nous appliquions une indentation à la checkbox sélectionnée :

input[type="checkbox"]:checked {
    height: 20px;
    transition: width 1s ease;
}

input[type="checkbox"]:checked {
    width: 30px;
}

Et voici la démo.

Transition avec :disabled

Continuons avec nos formulaires, cette fois nous allons mélanger des transitions CSS3 et un peu de jQuery pour animer la couleur de background d'éléments du formulaire à chaque fois qu'ils sont désactivés via l'attribut disabled :

input[type="text"], textarea {
    background: #e2e2e2;
    transition: background 1s ease;
}

input:disabled, textarea:disabled {
    background: #666666;
}

Et le jQuery, vite fait, qui ajoute/supprime l'attribut disabled :

$(function() {
    $('input[type="radio"]').click(function() {
        if ($(':checked').val() === "other") {
            $('input[type="text"]').removeAttr("disabled");
        } else {
            $('input[type="text"]').attr("disabled", "disabled");
        }
    });
});

Lorsque le dernier bouton radio est sélectionné (celui qui a une valeur de other), l'attribut de la boîte de texte est supprimé (removeAttr). Si une autre option est sélectionnée, l'attribut disabled est ajouté à nouveau au dernier bouton.

La pseudo-classe :disabled dépend de l'existence de cet attribut, donc l'animation ne se produira que lorsque l'attribut est ajouté ou supprimé. Voici la démo.

Transitions avec les media queries

Cette dernière animation est sans doute la moins susceptible d'être utilisée en pratique, parce que les seuls à modifier la taille de la fenêtre pour voir ce qui se passe sont les développeurs web.

Cela dit, c'est une autre façon d'utiliser les animations CSS3. La page d'accueil de Modernizr s'en sert.

Voici le code :

.box {
    width: 440px;
    height: 440px;
    background: #222;
    margin: 0 auto;
    transition: width 2s ease, height 2s ease;
}

@media only screen and (max-width : 960px) {
    .box {
        width: 300px;
        height: 300px;
    }
}

Dans cet exemple nous animons deux propriétés différentes simultanément, en séparant les deux par une virgule. Le media query diminue la taille de la boîte lorsque la largeur de l'écran est inférieure à 961px. Vous pouvez modifier la largeur de votre écran pour voir la démo en action.

Un piège à éviter

Comme on vient de le voir, les transitions peuvent être déclenchées de multiples façons, et même via JavaScript. La transition en elle-même ne dépend d'aucun événement. Bien que ce soit l'événement qui déclenche la transition, elle en est totalement indépendante (comme il se doit dans une bonne séparation présentation / comportement).

C'est pourquoi vous remarquerez un comportement inattendu si vous placez la transition dans la partie de votre CSS qui déclenche l'événement.

En voici une illustration avec cette transition simple qui utilise la pseudo-classe :hover :

a:link, a:visited {
    font-size: 40px;
    transition: font-size 1s ease;
}

a:hover {
    font-size: 100px;
}

Vous pouvez voir l'effet dans cette démo. Très simple, non ? Vous passez le curseur sur le lien, et la font-size s'anime (transitionne) de 40px à 100px. Vous sortez du lien, et elle transitionne de 100px à 40px.

Essayons maintenant ceci :

a:link, a:visited {
    font-size: 40px;
}

a:hover {
    font-size: 100px;
    transition: font-size 1s ease;
}

Qu'y a-t-il de différent ? Eh bien au lieu de mettre la propriété transition sur l'état naturel du lien, je l'ai mise sur son état hover. Et le résultat ? Vous l'avez sans doute deviné, mais voici la démo. La transition étant maintenant sur l'état hover, elle ne se produit que sur cet état, c'est à dire lorsque hover se produit. Quand vous sortez du lien (c'est à dire quand vous revenez à l'état naturel du lien), la propriété change instantanément de 100px à 40px, comme s'il n'y avait pas de transition, ce qui est le cas.

Ce n'est pas grand chose, mais il faut le garder à l'esprit si vous placez vos transitions sur l'état de l'événement plutôt que sur l'état naturel de l'élément. Dans certains cas, ça peut être l'effet souhaité, comme nous allons le voir maintenant.

Un cas d'utilisation

On pourrait imaginer que la transition sur hover soit beaucoup plus longue que la transition sur la sortie du hover, voici ce que ça pourrait donner :

a:link, a:visited {
    font-size: 40px;
    transition: font-size 1s ease;
}

a:hover {
    font-size: 100px;
    transition: font-size 3s ease;
}

Et la démo. Dans cet exemple, la transition sur hover dure trois secondes alors que la sortie ne dure qu'une seconde (changement de la partie transition-duration de la notation raccourcie). Ça peut être pratique dans les situations où vous souhaitez que la partie déclenchée par l'utilisateur se déroule d'une certaine façon alors que le “retour à la normale” peut se faire rapidement.