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;
}

Menu