From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- files/fr/web/api/effecttiming/delay/index.md | 80 ++++++++++++---------------- files/fr/web/api/effecttiming/index.md | 79 +++++++++++---------------- 2 files changed, 65 insertions(+), 94 deletions(-) (limited to 'files/fr/web/api/effecttiming') diff --git a/files/fr/web/api/effecttiming/delay/index.md b/files/fr/web/api/effecttiming/delay/index.md index 82ec0c5c0c..c8480f04d4 100644 --- a/files/fr/web/api/effecttiming/delay/index.md +++ b/files/fr/web/api/effecttiming/delay/index.md @@ -11,32 +11,30 @@ tags: translation_of: Web/API/EffectTiming/delay original_slug: Web/API/AnimationEffectTimingProperties/delay --- -
{{SeeCompatTable}}{{APIRef("Web Animations")}}
+{{SeeCompatTable}}{{APIRef("Web Animations")}} -

La propriété delay est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation.

+La propriété **`delay`** est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation. -
-

Note : {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris delay. La valeur de delay correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}.

-
+> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. -

Syntaxe

+## Syntaxe -
var timingProperties = {
-  delay: delayInMilliseconds
-};
+    var timingProperties = {
+      delay: delayInMilliseconds
+    };
 
-timingProperties.delay = delayInMilliseconds;
-
+ timingProperties.delay = delayInMilliseconds; -

Valeur

+### Valeur -

Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0.

+Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0. -

Exemples

+## Exemples -

Dans l'exemple Pool of Tears, chaque larme commence à un instant aléatoire grâce à l'objet de minutage :

+Dans l'exemple _[Pool of Tears](https://codepen.io/rachelnabors/pen/EPJdJx?editors=0010)_, chaque larme commence à un instant aléatoire grâce à l'objet de minutage : -
// Générateur de valeurs plus
+```js
+// Générateur de valeurs plus
 // ou moins aléatoires
 var getRandomMsRange = function(min, max) {
   return Math.random() * (max - min) + min;
@@ -54,34 +52,22 @@ tears.forEach(function(el) {
       iterations: Infinity,
       easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
     });
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Web Animations', '#start-delay', 'delay')}}{{Spec2('Web Animations')}}Brouillon d'édiiton.
- -

Compatibilité des navigateurs

- -

{{Compat("api.EffectTiming.delay")}}

- -

Voir aussi

- - +}); +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Web Animations', '#start-delay', 'delay')}} | {{Spec2('Web Animations')}} | Brouillon d'édiiton. | + +## Compatibilité des navigateurs + +{{Compat("api.EffectTiming.delay")}} + +## Voir aussi + +- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) +- {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (`delay`) +- La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}). +- Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}} diff --git a/files/fr/web/api/effecttiming/index.md b/files/fr/web/api/effecttiming/index.md index 3cbcad981f..a92f204fb7 100644 --- a/files/fr/web/api/effecttiming/index.md +++ b/files/fr/web/api/effecttiming/index.md @@ -12,60 +12,45 @@ tags: translation_of: Web/API/EffectTiming original_slug: Web/API/AnimationEffectTimingProperties --- -
{{SeeCompatTable}}{{APIRef("Web Animations")}}
+{{SeeCompatTable}}{{APIRef("Web Animations")}} -

Le dictionnaire AnimationEffectTimingProperties est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si duration n'est pas paramétrée, l'animation ne sera pas lancée.

+Le dictionnaire **`AnimationEffectTimingProperties`** est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si `duration` n'est pas paramétrée, l'animation ne sera pas lancée. -

Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (keyframe) et comment elle se comporte au début et à la fin.

+Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (_keyframe_) et comment elle se comporte au début et à la fin. -

Propriétés

+## Propriétés -
-
{{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}}
-
Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0.
-
{{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}}
-
Indique si l'animation se déroule dans le sens the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). Defaults to "normal".
-
{{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}}
-
La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0.
-
{{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}}
-
La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme "linear", "ease", "ease-in", "ease-out" et "ease-in-out" ou une fonction "cubic-bezier" de la forme "cubic-bezier(0.42, 0, 0.58, 1)". La valeur par défaut est "linear".
-
{{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}}
-
Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0.
-
{{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}}
-
Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée ("backwards"), être conservés après la fin de l'animation ("forwards") ou les deux both. La valeur par défaut est "none".
-
{{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}}
-
Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0.
-
{{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}}
-
Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe.
-
+- {{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}} + - : Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0. +- {{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}} + - : Indique si l'animation se déroule dans le sens the animation runs forwards (`normal`), backwards (`reverse`), switches direction after each iteration (`alternate`), or runs backwards and switches direction after each iteration (`alternate-reverse`). Defaults to `"normal"`. +- {{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}} + - : La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0. +- {{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}} + - : La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme `"linear"`, `"ease"`, `"ease-in"`, `"ease-out"` et `"ease-in-out"` ou une fonction `"cubic-bezier"` de la forme `"cubic-bezier(0.42, 0, 0.58, 1)"`. La valeur par défaut est `"linear"`. +- {{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}} + - : Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0. +- {{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}} + - : Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée (`"backwards"`), être conservés après la fin de l'animation (`"forwards"`) ou les deux `both`. La valeur par défaut est `"none"`. +- {{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}} + - : Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0. +- {{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}} + - : Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe. -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}}{{Spec2('Web Animations')}}Définition initiale.
+| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}} | {{Spec2('Web Animations')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.EffectTiming")}}

+{{Compat("api.EffectTiming")}} -

Voir aussi

+## Voir aussi - +- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API) +- [Utiliser l'API Web Animations](/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) +- {{domxref("Element.animate()")}} +- {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} +- {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} -- cgit v1.2.3-54-g00ecf