KeyframeEffect : le constructeur KeyframeEffect()

Syntaxe

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

Paramtres

Le constructeur plusieurs arguments (voir ci-dessus) cre une nouvelle instance d'objet KeyframeEffect. Ses paramtres sont :

cible

L'lment DOM animer, ou null.

imagesCles

Un objet keyframes ou null.

options Facultatif

Soit un entier reprsentant la dure de l'animation (en millisecondes), soit un objet contenant un ou plusieurs des lments suivants :

• delay Facultatif

  • Le nombre de millisecondes attendre avant le dbut de l'animation. Par dfaut, 0.

• direction Facultatif

  • Indique si l'animation se droule vers l'avant (normal), l'envers (reverse), change de direction aprs chaque itration (alternate), ou se droule vers l'arrire et change de direction aprs chaque itration (alternate-reverse). Par dfaut, "normal".

• duration Facultatif

  • Le nombre de millisecondes que chaque itration de l'animation prend pour se terminer. Par dfaut, 0. Bien que cela soit techniquement optionnel, gardez l'esprit que votre animation ne s'excutera 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 dfaut, "linear".

• endDelay Facultatif

  • Le nombre de millisecondes attendre aprs la fin d'une animation. Ceci est principalement utile lors de la squence d'animations en fonction du temps de fin d'une autre animation. Par dfaut, 0.

• fill Facultatif

  • Indique si les effets de l'animation doivent tre reflts par l'lment avant de jouer ("backwards"), conservs aprs la fin de l'animation ("forwards"), ou les deux. Par dfaut, "none".

• iterationStart Facultatif

  • Dcrit quel point dans l'itration l'animation doit commencer. 0.5 indiquerait de commencer mi-chemin de la premire itration par exemple, et avec cette valeur dfinie, une animation avec 2 itrations se terminerait mi-chemin d'une troisime itration. Par dfaut, 0.0.

• iterations Facultatif

  • Le nombre de fois que l'animation doit se rpter. Par dfaut, 1, et peut galement prendre une valeur de Infinity pour la faire rpter aussi longtemps que l'lment existe.

• composite Facultatif

  • Dtermine comment les valeurs sont combines entre cette animation et d'autres animations spares qui ne spcifient pas leur propre opration composite. Par dfaut, replace.
    • add indique un effet additif, o chaque itration successive s'appuie sur la prcdente. Par exemple, avec transform, un translateX(-200px) ne remplacerait pas une valeur antrieure 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 prcdente avec la nouvelle.

• iterationComposite Facultatif

  • Dtermine comment les valeurs voluent d'itration en itration dans cette animation. Peut tre dfini sur accumulate ou replace (voir ci-dessus). Par dfaut, replace.

• pseudoElement Facultatif

  • Une chane de caractres string contenant un slecteur de pseudo-element, tel que "::before". Si prsent, l'effet est appliqu l'lment pseudo-slectionn de target, plutt qu' target lui-mme.

Le constructeur un seul argument (voir ci-dessus) cre un clone d'une instance d'objet KeyframeEffect existante. Son paramtre est le suivant :

sourceKeyFrames

Un objet KeyframeEffect que vous souhaitez cloner.

Exemples

Dans l'exemple suivant, le constructeur KeyframeEffect est utilis pour crer un ensemble d'images cls qui dictent comment l'emoji doit rouler sur le sol :

const emoji = document.querySelector("div"); // l'lment  animer

const 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;
}

Spcifications

Compatibilit des navigateurs

Voir aussi

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