Transition-duration

La propriété transition-duration, habituellement utilisée à l’intérieur de la propriété raccourcie transition, sert à définir la durée de la transition, autrement dit le temps qu’il faudra pour que l’élément cible passe d’un état à l’autre :

//CSS
.exemple {
    transition-duration: 3s;
}

La propriété peut prendre une des valeurs suivantes :

  • Une valeur de temps valable (définie en secondes ou milli-secondes)
  • une liste de valeurs de temps (séparées par une virgule) pour définir plusieurs durées différentes sur des transitions multiples appliquées à un même élément

La valeur par défaut de transition-duration est 0s, qui signifie qu’il n’y aura aucune transition, le changement d'état s’effectuera immédiatement même si l’on a défini une transition. On peut exprimer la valeur de temps sous forme décimale pour un timing plus précis. Les valeurs négatives ne sont pas autorisées.

Le CodePen qui suit montre un effet de survol sur une boîte, qui utilise une valeur de transition-duration de 1s pour changer de background-color :

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

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

//CSS
.exemple {
    -webkit-transition-duration: 700ms;
    -moz-transition-duration: 700ms;
    -o-transition-duration: 700ms;
    transition-duration: 700ms;
}

À 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.