Transition

La propriété transition est une propriété raccourcie qui permet de représenter jusqu’à 4 propriétés liées aux transitions :

//CSS
.exemple {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Ces propriétés de transitions permettent aux éléments de changer de valeur sur une durée donnée, en animant les changements plutôt qu’en les laissant se produire de manière instantanée. Voici un exemple simple de transition de la couleur de background d’une div au survol :

//CSS
div {
  transition: background-color 0.5s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}

Cette div passera du rouge au vert en une demie seconde (et réciproquement), comme vous pouvez le voir dans la démo suivante (où la durée est allongée à 2 secondes pour plus de clarté) :

See the Pen zqpEg by Louis Lazaris (@impressivewebs) on CodePen.

Vous pouvez spécifier une propriété en particulier, comme nous l’avons fait ci-dessus, ou utiliser la valeur all pour indiquer que toutes les propriétés (animables) peuvent faire l’objet d’une transition.

//CSS
div {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}
div:hover {
  background: green;
  padding: 20px;
}

Dans l’exemple qui précède, nous aurons une transition à la fois sur le background et sur le padding, en raison de la valeur all spécifiée dans la partie correspondant à transition-property dans le raccourci.

On peut donner des valeurs de transition différentes à des propriétés différentes, en les séparant par une virgule comme ceci :

//CSS
div {
  transition: background 0.2s ease,
              padding 0.8s linear;
}

Pour l’essentiel, l’ordre des valeurs n’est pas important — sauf si on utilise un retard (delay). Dans ce cas, vous devez d’abord spécifier une durée. La première valeur de temps reconnue par le navigateur sera toujours considérée par lui comme représentant la durée de la transition. Toute autre valeur de temps sera ensuite considérée comme un retard.

Certaines propriétés ne peuvent pas être transitionnées car elles ne sont pas animables. Vérifiez la liste des propriétés animables dans la spécification. Voir également l’article animation du Dico CSS.

En spécifiant la transition sur l’élément lui-même (c’est à dire sur l’élément de départ), on indique que la transition doit se produire dans les deux sens, comme nous l’avons vu dans notre premier exemple où la couleur de background repassait au rouge lorsqu’on quittait le survol, avec les mêmes propriétés de transition. Dans l’exemple qui suit par contre, la transition se produit au survol, mais pas lorsqu’on quitte le survol, on repasse instantanément au rouge sans transition :

See the Pen zohgt by Louis Lazaris (@impressivewebs) on CodePen.

La raison est que nous avons placé la propriété transition dans la règle définissant l’état au survol (:hover) et qu’il n’y a pas de transition définie dans la règle définissant l’état hors survol. Sur ce point intéressant, et les situations où l’on pourrait souhaiter ce comportement, voir l’article Subtilités de CSS Transitions dans la Cascade.

De la même façon, si vous voulez avoir une durée de transition différente entre le survol et le retour à l’état normal, il suffit de mettre dans la déclaration élément:hover la durée de l’animation au survol et dans la déclaration élément la durée de l’animation souhaitée pour le retour à la normale.

Pour la compatibilité dans tous les navigateurs, n’oubliez pas les préfixes constructeurs, ou mieux, utilisez Autoprefixer.

//CSS
.exemple {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}

À lire également dans La Cascade :

Subtilités de CSS Transitions, par Louis Lazaris

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

articles en français :

Animez votre site avec CSS3, par openclassrooms
Transitions CSS3, par Alsacréations

articles en anglais :

Using CSS3 transitions, a comprehensive guide, par Louis Lazaris


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d’oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.