La méthodegetKeyframes() de l'interfaceKeyframeEffect renvoie un tableau des images clés (keyframes en anglais) calculées qui composent cette animation ainsi que leurs décalages calculés.

Syntaxe

getKeyframes()

Paramètres

Aucun.

Valeur de retour

Renvoie une séquence d'objets avec le format suivant :

paires propriété/valeur

Autant de paires propriété/valeur que contient chaque image clé de l'animation.

offset

Le décalage de l'image clé, spécifié comme un nombre entre0.0 et1.0 inclus ounull. Cela équivaut à indiquer des états de début et de fin en pourcentages dans les feuilles de style CSS avec@keyframes. Cette valeur vaudranull si l'image clé est espacée automatiquement.

computedOffset

Le décalage calculé pour cette image clé, déterminé lorsque la liste des images clés calculées a été produite. Contrairement àoffset, ci-dessus,computedOffset n'est jamaisnull.

easing

Lafonction d'atténuation utilisée de cette image clé jusqu'à la suivante de la série.

composite

L'opérationKeyframeEffect.composite utilisée pour combiner les valeurs spécifiées dans cette image clé avec la valeur sous-jacente. Cette propriété sera absente si l'opération de composition spécifiée sur l'effet est utilisée.

Exemples

Dans l'exemple suivant, nous inspectons l'animation « rolling » pour voir ses images clés avec la méthodegetKeyframes() :

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

<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'API Web Animations
• Méthode des objetsKeyframeEffect