Javascript

JavaScript permet de gérer par programmation, les propriétés d'animation et la création de keyframes.

Prenons l'exemple d'une div :

1
<div id="elt"></div>

Dans notre script, nous récupérons dans la constante elt la div.

1
const elt = document.querySelector("div#elt");

DéfinitionKeyframes

Création d'une balise <style> dans la <head>

1
let style = document.createElement('style');
2
document.head.appendChild(style);

Insertion d'une règle keyframes (nom de la fonction animation)

1
style.sheet.insertRule("@keyframes animation {}");

Récupération de la règle et insertion de règles dans le keyframes

1
let rule = style.sheet.rules[0];
2
rule.appendRule("0% {background-color: red;}");
3
rule.appendRule("50% {background-color: blue;}");
4
rule.appendRule("100% {background-color: green; transform: translate(300px);}");

Pour changer éventuellement le contenu d'une règle :

1
rule[1].style.backgroundColor = "green";

DéfinitionAffectation de l'animation à elt

animationName

1
elt.style.animationName = "animation";

animationIterationCount

1
elt.style.animationIterationCount = "infinite";

animationDuration

1
elt.style.animationDuration = "5s";

animationTimingFunction

1
elt.style.animationTimingFunction = "linear";

animationDirection

1
elt.style.animationDirection = "normal";

animationDelay

1
elt.style.animationDelay = "0s";

Exemple

Principe d'animation