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;
}
(publicité)
À lire également dans La Cascade :
Subtilités de CSS Transitions, par Louis Lazaris
Autres ressources à consulter sur ce sujet :
- MDN : transition-duration
- Codrops CSS Reference (en anglais)
- Spécification W3C (en anglais)
- Autres entrées du Dico CSS :
- transition
- transition-property
- transition-timing-function
- transition-duration
- transition-delay
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 : Chris Coyier 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.