Transition-delay

La propriété transition-delay, habituellement utilisée à l’intérieur de la propriété raccourcie transition, sert à définir la longueur de temps devant s’écouler avant le début de la transition, autrement dit le retard (delay) à lui appliquer :

//CSS
.exemple {
    transition-delay: 5s;
}

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 retards différents sur des transitions multiples appliquées à un même élément

La valeur par défaut de transition-delay est 0s, autrement dit aucun retard, et la transition commencera immédiatement. On peut exprimer la valeur de temps sous forme décimale pour un timing plus précis.

Lorsqu’une transition a une valeur de retard négative, elle commencera immédiatement (sans retard), mais à mi-chemin, comme si elle avait déjà réalisé la transition correspondant au temps spécifié.

Le CodePen qui suit montre un effet de survol sur une boîte, qui utilise une valeur de transition-delay de 2s pour une transition durant 1s :

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

Comparez maintenant à la démo suivante, où le retard est négatif (-1s) et la durée de transition est de 3s :

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

Remarquez que dans le second exemple, seuls les 2/3 finaux de l’animation sont visibles, et qu’il n’y a pas de retard. La valeur négative supprime le retard et raccourcit la durée de l’animation.

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

//CSS
.exemple {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

À 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
Maintaining CSS Style States using “Infinite” Transition Delays


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.