Animation Effect Timing Properties

Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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

Specification Status Comment
Web Animations
La définition de 'Animation Effect Timing Properties Dictionary' dans cette spécification.
Version de travail Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ?
 
? ?

?

?
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support ? ? ? ? ? ? ?

See also

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : HereComesJuju, rachelnabors
 Dernière mise à jour par : HereComesJuju,