Comment définir dynamiquement les valeurs de rotation d'animation d'images clés WebKit à l'aide de JavaScript ?

Valeurs d'images clés dynamiques : utilisation de variables JavaScript en CSS

Question :

Comment pouvez-vous définir dynamiquement les valeurs de rotation d'une animation d'images clés Webkit à l'aide de JavaScript variables ?

Réponse :

En CSS, vous ne pouvez pas insérer directement de variables JavaScript dans les animations d'images clés. Pour y parvenir, vous devez créer les règles CSS via JavaScript et les insérer dans le modèle d'objet CSS (CSSOM).

Considérez l'exemple de code suivant :

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}

#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}

Pour définir dynamiquement le valeurs de rotation, vous pouvez écrire une fonction JavaScript :

// Assume var dogValue = "20deg";
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
var keyframesRule = `@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-${dogValue});}
    100% {-webkit-transform: rotate(${dogValue});}
}`;
styleElement.appendChild(document.createTextNode(keyframesRule));
document.head.appendChild(styleElement);

Ce code crée un nouveau