Animation Effect Timing Properties

Element.animate(), KeyframeEffectReadOnly.KeyframeEffectReadOnly(), et KeyframeEffect.KeyframeEffect() acceptent un objet contenant les propriétés de timing suivantes. Ces propriétés sont toutes optionnelles, bien que ne pas définir la propriété duration empêchera l'animation d'être jouée.

Syntaxe

var timingProperties = {
  delay: 1000,
  direction: "alternate",
  duration: 3000,
  easing: "ease-in",
  endDelay: 100, 
  fill: "both",
  iterationStart: 1.5, 
  iterations: Infinity
}

Propriétés

AnimationEffectTimingProperties.delay Facultatif

Le nombre de millisecondes de délai avant le début de l'animation. La valeur par défaut est 0.

AnimationEffectTimingProperties.direction Facultatif

Détermine si l'animation se joue "en avant" (normal), "en arrière" (reverse), change de direction après chaque itération (alternate), or se joue d'abord "en arrière" puis change de direction après chaque itération (alternate-reverse). La valeur par défaut est normal.

AnimationEffectTimingProperties.duration Facultatif

Le temps de complétion, en millisecondes, de chaque itération de l'animation. La valeur par défaut est 0.

AnimationEffectTimingProperties.easing Facultatif

Le taux de variation de l'animation au cours du temps. Accepte les valeurs prédéfinies linear, ease, ease-in, ease-out, et ease-in-out, ou une valeur personnalisée cubic-bezier comme, par exemple, cubic-bezier(0.42, 0, 0.58, 1). La valeur par défaut est linear.

AnimationEffectTimingProperties.endDelay Facultatif

Le durée, en millisecondes, du délai après la fin de l'animation. Principalement utilisé pour organiser les animations de manière séquentielle, en se basant sur le moment de la fin d'une autre animation. La valeur par défaut est 0. 

AnimationEffectTimingProperties.fill Facultatif

Détermine si les effets de l'animation doivent être reflétés par le(s) élément(s) avant d'avoir été jouée (backwards), retenus après que l'animation ait été jouée (forwards), ou les deux (both). La valeur par défaut est none.

AnimationEffectTimingProperties.iterationStart Facultatif

Décrit à quel moment de l'itération l'animation doit démarrer. Par exemple, en définissant un iterationStart de 0.5, qui indique que l'animation doit démarrer au milieu de la première itération, une animation avec 2 itérations s'arrêterait au milieu de la troisième itération. La valeur par défaut est 0.0.

AnimationEffectTimingProperties.iterations Facultatif

Le nombre de répétitions de l'animation. La valeur par défaut est 1, et peut aussi prender la valeur infinity, si l'on souhaite la faire se répéter indéfiniment.

Specifications

Browser compatibility

See also

• Element.animate()
• KeyframeEffect.KeyframeEffect()
• KeyframeEffectReadOnly.KeyframeEffectReadOnly()