Comment créer des animations CSS @-Keyframe dynamiques ?

Création d'animation CSS @-Keyframe dynamique

Dans le domaine du développement Web, la création dynamique d'animations CSS @keyframes peut être un outil précieux outil. Ce besoin survient lorsque vous avez besoin d'animations personnalisées avec des paramètres spécifiques, tels que la possibilité de s'arrêter à une position particulière.

Pour ce faire, vous pouvez injecter dynamiquement des styles CSS dans votre page Web. Cette méthode vous permet de remplacer les styles existants et d'éviter la charge inutile des bibliothèques supplémentaires.

Solution :

Implémentez le code suivant :

var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = `
@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(A_DYNAMIC_VALUE);
    }
}
`;
style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);

Cet extrait de code crée un