Le constructeurKeyframeEffect() de l'API Web Animations retourne une nouvelle instance d'objetKeyframeEffect, et permet également de cloner une instance d'objet d'effet d'image clé (keyframe en anglais) existante.

Syntaxe

new KeyframeEffect(cible, imagesCles)new KeyframeEffect(cible, imagesCles, options)new KeyframeEffect(sourceImagesCles)

Paramètres

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

cible

L'élément DOM à animer, ounull.

imagesCles

Unobjet keyframes ounull.

optionsFacultatif

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

• delayFacultatif

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

• directionFacultatif

  • 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".

• durationFacultatif

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

• easingFacultatif

  • 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".

• endDelayFacultatif

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

• fillFacultatif

  • 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"), oules deux. Par défaut,"none".

• iterationStartFacultatif

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

• iterationsFacultatif

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

• compositeFacultatif

  • 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, avectransform, untranslateX(-200px) ne remplacerait pas une valeur antérieurerotate(20deg) mais donneraittranslateX(-200px) rotate(20deg).
    • accumulate est similaire mais un peu plus intelligent :blur(2)etblur(5) deviennentblur(7), pasblur(2) blur(5).
    • replace écrase la valeur précédente avec la nouvelle.

• iterationCompositeFacultatif

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

• pseudoElementFacultatif

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

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

sourceKeyFrames

Un objetKeyframeEffect que vous souhaitez cloner.

Exemples

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

const emoji = document.querySelector("div"); // l'élément à animerconst rollingKeyframes = new KeyframeEffect(  emoji,  [    { transform: "translateX(0) rotate(0)" }, // image clé    { transform: "translateX(200px) rotate(1.3turn)" }, // image clé  ],  {    // options d'image clé    duration: 2000,    direction: "alternate",    easing: "ease-in-out",    iterations: "Infinity",  },);const rollingAnimation = new Animation(rollingKeyframes, document.timeline);rollingAnimation.play();

<div>🤣</div>

body {  box-shadow: 0 5px 5px pink;}div {  width: fit-content;  margin-left: calc(50% - 132px);  font-size: 64px;  user-select: none;  margin-top: 1rem;}

Spécifications

Compatibilité des navigateurs

Voir aussi

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