aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCarolyn Wu <87150472+cw118@users.noreply.github.com>2022-02-25 04:20:22 -0500
committerGitHub <noreply@github.com>2022-02-25 10:20:22 +0100
commitaae1fdde2d3cd00a2405d409ae9f5299857815c9 (patch)
tree90c8ad2ac8410aeb130259116143b16d74bbdc8f
parenta68072f510ab3d4ebb777643b2f274914882f788 (diff)
downloadtranslated-content-aae1fdde2d3cd00a2405d409ae9f5299857815c9.tar.gz
translated-content-aae1fdde2d3cd00a2405d409ae9f5299857815c9.tar.bz2
translated-content-aae1fdde2d3cd00a2405d409ae9f5299857815c9.zip
Minor fixes/updates for transition-delay (#4271)
* Minor fix and replace macros in transition-delay * Nitpicking - Condense HTML code block Co-authored-by: SphinxKnight <julien.gattelier@gmail.com>
-rw-r--r--files/fr/web/css/transition-delay/index.md49
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&nbsp;:
-- 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("&lt;time&gt;")}} 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)