KeyframeEffect : le constructeur KeyframeEffect()

Syntaxe

Paramètres

Le constructeur à plusieurs arguments (voir ci-dessus) crée une nouvelle instance d'objet KeyframeEffect. Ses paramètres sont :

L'élément DOM à animer, ou null.

Un objet keyframes ou null.

Soit un entier représentant la durée de l'animation (en millisecondes), soit un objet contenant un ou plusieurs des éléments suivants :

• delay Facultatif

  • Le nombre de millisecondes à attendre avant le début de l'animation. Par défaut, 0.

• direction Facultatif

  • Indique si l'animation se déroule vers l'avant (normal), à l'envers (reverse), change de direction après chaque itération (alternate), ou se déroule vers l'arrière et change de direction après chaque itération (alternate-reverse). Par défaut, "normal".

• duration Facultatif

  • Le nombre de millisecondes que chaque itération de l'animation prend pour se terminer. Par défaut, 0. Bien que cela soit techniquement optionnel, gardez à l'esprit que votre animation ne s'exécutera pas si cette valeur est 0.

• easing Facultatif

  • Le taux de changement de l'animation au fil du temps. Accepte une <easing-function>, telle que "linear", "ease-in", "step-end", ou "cubic-bezier(0.42, 0, 0.58, 1)". Par défaut, "linear".

• endDelay Facultatif

  • Le nombre de millisecondes à attendre après la fin d'une animation. Ceci est principalement utile lors de la séquence d'animations en fonction du temps de fin d'une autre animation. Par défaut, 0.

• fill Facultatif

  • Indique si les effets de l'animation doivent être reflétés par l'élément avant de jouer ("backwards"), conservés après la fin de l'animation ("forwards"), ou les deux. Par défaut, "none".

• iterationStart Facultatif

  • Décrit à quel point dans l'itération l'animation doit commencer. 0.5 indiquerait de commencer à mi-chemin de la première itération par exemple, et avec cette valeur définie, une animation avec 2 itérations se terminerait à mi-chemin d'une troisième itération. Par défaut, 0.0.

• iterations Facultatif

  • Le nombre de fois que l'animation doit se répéter. Par défaut, 1, et peut également prendre une valeur de Infinity pour la faire répéter aussi longtemps que l'élément existe.

• composite Facultatif

  • Détermine comment les valeurs sont combinées entre cette animation et d'autres animations séparées qui ne spécifient pas leur propre opération composite. Par défaut, replace.
    • add indique un effet additif, où chaque itération successive s'appuie sur la précédente. Par exemple, avec transform, un translateX(-200px) ne remplacerait pas une valeur antérieure rotate(20deg) mais donnerait translateX(-200px) rotate(20deg).
    • accumulate est similaire mais un peu plus intelligent : blur(2) et blur(5) deviennent blur(7), pas blur(2) blur(5).
    • replace écrase la valeur précédente avec la nouvelle.

• iterationComposite Facultatif

  • Détermine comment les valeurs évoluent d'itération en itération dans cette animation. Peut être défini sur accumulate ou replace (voir ci-dessus). Par défaut, à replace.

• pseudoElement Facultatif

  • Une chaîne de caractères string contenant un sélecteur de pseudo-element, tel que "::before". Si présent, l'effet est appliqué à l'élément pseudo-sélectionné de target, plutôt qu'à target lui-même.

Le constructeur à un seul argument (voir ci-dessus) crée un clone d'une instance d'objet KeyframeEffect existante. Son paramètre est le suivant :

Un objet KeyframeEffect que vous souhaitez cloner.

Exemples

Dans l'exemple suivant, le constructeur KeyframeEffect est utilisé pour créer un ensemble d'images clés qui dictent comment l'emoji doit rouler sur le sol :

Spécifications

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Voir aussi

• L'interface KeyframeEffect
• L'API Web Animations
• Animation