From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/transition-delay/index.html | 153 --------------------------- 1 file changed, 153 deletions(-) delete mode 100644 files/fr/web/css/transition-delay/index.html (limited to 'files/fr/web/css/transition-delay/index.html') diff --git a/files/fr/web/css/transition-delay/index.html b/files/fr/web/css/transition-delay/index.html deleted file mode 100644 index 6282a0a5cc..0000000000 --- a/files/fr/web/css/transition-delay/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: transition-delay -slug: Web/CSS/transition-delay -tags: - - CSS - - Propriété - - Reference - - Transitions -translation_of: Web/CSS/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é.

- -
{{EmbedInteractiveExample("pages/css/transition-delay.html")}}
- -

Cette durée peut être nulle, positive ou négative :

- - - -

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.

- -

Syntaxe

- -
/* Valeurs temporelles */
-/* Type <time> */
-transition-delay: 3s;
-transition-delay: 2s, 4ms;
-
-/* Valeurs globales */
-transition-delay: inherit;
-transition-delay: initial;
-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é.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Exemple illustrant différentes temporisations

- -

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

CSS

- -
-.box {
-  margin: 20px;
-  padding: 10px;
-  display: inline-block;
-  width: 100px;
-  height: 100px;
-  background-color: red;
-  font-size: 18px;
-  transition-property: background-color font-size transform color;
-  transition-timing-function: ease-in-out;
-  transition-duration: 3s;
-}
-
-.transformed-state {
-  transform: rotate(270deg);
-  background-color: blue;
-  color: yellow;
-  font-size: 12px;
-  transition-property: background-color font-size transform color;
-  transition-timing-function: ease-in-out;
-  transition-duration: 3s;
-}
-
-.delay-1 {
-  transition-delay: 0.5s;
-}
-
-.delay-2 {
-  transition-delay: 2s;
-}
-
-.delay-3 {
-  transition-delay: 4s;
-}
-
- -

JavaScript

- -
function change() {
-  const elements = document.querySelectorAll("div.box");
-  for (let element of elements) {
-    element.classList.toggle("transformed-state");
-  }
-}
-
-const changeButton = document.querySelector("#change");
-changeButton.addEventListener("click", change);
-
- -

Résultat

- -
{{EmbedLiveSample("exemple_illustrant_differentes_temporisations",275,200)}}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.transition-delay")}}

- -

Voir aussi

- - -- cgit v1.2.3-54-g00ecf