JavaScript peut-il modifier dynamiquement les paramètres d'animation CSS ?

Paramétrage des animations CSS avec JavaScript

Question :

Dans le code d'animation CSS fourni, est-il possible de modifier dynamiquement les valeurs de marge gauche et de largeur à travers JavaScript ?

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Réponse :

Oui, il existe un moyen de transmettre des valeurs aux animations CSS à partir de JavaScript en utilisant des variables CSS.

.p1,.p2 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
    width: var(--w, 100%);
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScript :

// Set CSS variables using JavaScript
document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');

Cette approche vous permet de contrôler les paramètres d'animation de manière dynamique via JavaScript, permettant une plus grande flexibilité et personnalisation.

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!