Comment créer dynamiquement des animations CSS avec '@-Keyframes' ?

Création dynamique d'animations CSS '@-Keyframe'

Pour réaliser une personnalisation dynamique des animations CSS, vous pouvez créer et insérer des règles de feuille de style sur le voler. Cette approche vous permet de remplacer les styles existants et de contrôler les points de terminaison de l'animation en fonction des valeurs reçues.

Solution :

1. Créer un style élément :

   var style = document.createElement('style');
   style.type = 'text/css';

2. Construire la définition des images clés :

   var keyFrames = '\
   @-webkit-keyframes spinIt {\
       100% {\
           -webkit-transform: rotate(A_DYNAMIC_VALUE);\
       }\
   }\
   @-moz-keyframes spinIt {\
       100% {\
           -webkit-transform: rotate(A_DYNAMIC_VALUE);\
       }\
   }';

3. Remplacer l'espace réservé avec l'angle souhaité :

   style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");

4. Insérez le style dans l'en-tête du document :

   document.getElementsByTagName('head')[0].appendChild(style);

Cela créera et appliquera dynamiquement une animation CSS avec l'angle de rotation spécifié. Vous pouvez ajuster l'espace réservé A_DYNAMIC_VALUE selon vos besoins pour effectuer une rotation en fonction des valeurs fournies par le serveur.

En tirant parti de cette technique, vous pouvez optimiser les performances en évitant les animations JS natives qui peuvent consommer des ressources CPU importantes. La création dynamique de règles de feuille de style offre la flexibilité nécessaire pour personnaliser les animations à la volée, améliorant ainsi l'expérience utilisateur sans bibliothèques externes supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!