diff options
| -rw-r--r-- | files/fr/web/css/transition-delay/index.md | 49 |
1 files changed, 24 insertions, 25 deletions
diff --git a/files/fr/web/css/transition-delay/index.md b/files/fr/web/css/transition-delay/index.md index 779c0c591b..97d6c50213 100644 --- a/files/fr/web/css/transition-delay/index.md +++ b/files/fr/web/css/transition-delay/index.md @@ -2,20 +2,21 @@ title: transition-delay slug: Web/CSS/transition-delay translation_of: Web/CSS/transition-delay +browser-compat: css.properties.transition-delay --- {{CSSRef}} -La propriété **`transition-delay`** indique la durée à attendre avant de débuter la transition qui s'applique pour un changement de propriété. +La propriété CSS **`transition-delay`** indique la durée à attendre avant de débuter [la transition](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) qui s'applique pour un changement de propriété. {{EmbedInteractiveExample("pages/css/transition-delay.html")}} -Cette durée peut être nulle, positive ou négative : +Cette durée peut être nulle, positive ou négative : -- Une valeur de `0s` ou `0ms` indique que l'animation correspondante démarrera immédiatement lorsque la valeur sera modifiée. +- Une valeur de `0s` (ou `0ms`) indique que l'animation correspondante démarrera immédiatement. - Une valeur positive permettra d'attendre avant de démarrer l'effet de transition. -- Une valeur négative lancera l'animation immédiatement mais à partir d'un état intermédiaire (comme si la transition avait déjà commencé). +- Une valeur négative lancera l'animation immédiatement mais à partir d'un état intermédiaire (comme si la transition avait déjà commencé). -Il est possible d'indiquer plusieurs valeurs d'attente. Chaque valeur sera appliquée à la propriété correspondante donnée par la liste {{cssxref("transition-property")}} (qui agit comme un index des propriétés concernées par les transitions). S'il n'y a pas suffisamment de valeurs dans cette liste, les valeurs précédentes seront répétées jusqu'à ce qu'il y en ait suffisamment. S'il y a plus de valeurs d'attente que d'éléments dans {{cssxref("transition-property")}}, la liste est simplement tronquée. Dans les deux cas, la déclaration CSS est considérée comme valide. +Il est possible d'indiquer plusieurs valeurs d'attente. Chaque valeur sera appliquée à la propriété correspondante donnée par la liste [`transition-property`](/fr/docs/Web/CSS/transition-property) (qui agit comme un index des propriétés concernées par les transitions). S'il n'y a pas suffisamment de valeurs dans cette liste, les valeurs précédentes seront répétées jusqu'à ce qu'il y en ait suffisamment. S'il y a plus de valeurs d'attente que d'éléments dans [`transition-property`](/fr/docs/Web/CSS/transition-property), la liste est simplement tronquée. Dans les deux cas, la déclaration CSS est considérée comme valide. ## Syntaxe @@ -28,15 +29,20 @@ transition-delay: 2s, 4ms; /* Valeurs globales */ transition-delay: inherit; transition-delay: initial; +transition-delay: revert; transition-delay: unset; ``` ### Valeurs -- `<time>` - - : Une valeur {{cssxref("<time>")}} qui indique la durée à attendre avant de démarrer l'effet de transition déclenché par le changement de valeur d'une propriété. +- [`<time>`](/fr/docs/Web/CSS/time) + - : Une valeur [`<time>`](/fr/docs/Web/CSS/time) qui indique la durée à attendre avant de démarrer l'effet de transition déclenché par le changement de valeur d'une propriété. -### Syntaxe formelle +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} @@ -47,13 +53,10 @@ transition-delay: unset; #### HTML ```html - <div class="box delay-1">0,5 secondes</div> - - <div class="box delay-2">2 secondes</div> - - <div class="box delay-3">4 secondes</div> - - <button id="change">Changer</button> +<div class="box delay-1">0,5 secondes</div> +<div class="box delay-2">2 secondes</div> +<div class="box delay-3">4 secondes</div> +<button id="change">Changer</button> ``` #### CSS @@ -67,7 +70,7 @@ transition-delay: unset; height: 100px; background-color: red; font-size: 18px; - transition-property: background-color font-size transform color; + transition-property: background-color, font-size, transform, color; transition-timing-function: ease-in-out; transition-duration: 3s; } @@ -77,7 +80,7 @@ transition-delay: unset; background-color: blue; color: yellow; font-size: 12px; - transition-property: background-color font-size transform color; + transition-property: background-color, font-size, transform, color; transition-timing-function: ease-in-out; transition-duration: 3s; } @@ -111,21 +114,17 @@ changeButton.addEventListener("click", change); #### Résultat -{{EmbedLiveSample("Exemple_illustrant_différentes_temporisations",275,200)}} +{{EmbedLiveSample("",275,200)}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.transition-delay")}} +{{Compat}} ## Voir aussi - [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) -- L'API {{domxref("TransitionEvent")}} +- L'API [`TransitionEvent`](/fr/docs/Web/API/TransitionEvent) |