Transition-delay - Astuces CSS

La transition-delaypropriété, normalement utilisée dans le cadre d'un transitionraccourci, est utilisée pour définir une durée pour retarder le début d'une transition.

.delay-me ( transition-delay: 0.25s; )

La valeur peut être l'une des suivantes:

Une valeur de temps valide définie en secondes ou en millisecondes, par exemple 1.3sou125ms
Une liste de valeurs de temps séparées par des virgules, pour définir des valeurs de retard séparées sur plusieurs transitions pour un seul élément, par exemple 1s background-color, 350ms transform

La valeur par défaut de transition-delayest 0s, ce qui signifie qu'aucun délai n'aura lieu et que la transition commencera à se produire immédiatement. La valeur de temps peut être exprimée sous forme de nombre décimal pour une synchronisation plus précise.

Lorsqu'une transition a une valeur de retard négative, la transition commencera immédiatement (sans délai), cependant, la transition commencera à mi-chemin du processus, comme si elle avait déjà commencé.

Le stylet suivant montre un effet de survol sur une boîte qui utilise une transition-delayvaleur de 2savec une durée de transition de 1s:

Voir la
démo du délai de transition du stylet par CSS-Tricks (@ css-tricks)
sur CodePen.

Maintenant, comparez cela à la démo suivante, qui a un délai -1set une durée de 3s:

Voir la
démo du délai de transition Pen Negative par CSS-Tricks (@ css-tricks)
sur CodePen.

Notez que dans le deuxième exemple, seuls les deux derniers tiers de la transition réelle sont visibles et il n'y a pas de retard. La valeur négative supprime le délai et coupe effectivement la durée.

Pour la compatibilité dans tous les navigateurs pris en charge, les préfixes de fournisseur sont requis, avec la syntaxe standard déclarée en dernier:

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

IE10 (la première version stable d'IE à prendre en charge transition-delay) ne nécessite pas le -ms-préfixe.

Un cas d'utilisation courant est l'échelonnement des transitions:

Voir les
animations décalées du stylo de Chris Coyier (@chriscoyier)
sur CodePen.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.