L'animation CSS3 Spin ne fonctionne pas : pourquoi mes images clés sont-elles manquantes ?

Animation par rotation CSS3 : pourquoi cela ne fonctionne pas

Vous avez rencontré un problème où l'animation par rotation CSS3 ne fonctionne pas dans votre code. Avant le dépannage, il est crucial de comprendre le principe de base des animations CSS3.

Utiliser les images clés d'animation CSS3

Pour exploiter la puissance de l'animation CSS3, il est essentiel de définir les images clés de l'animation. . Les images clés spécifient comment un élément animé doit apparaître à différents intervalles de temps tout au long de l'animation. Dans votre code, vous avez référencé l'animation nommée « spin », mais ces images clés n'ont pas été définies.

Reportez-vous au guide officiel du développeur Mozilla (https://developer.mozilla.org/en- US/docs/CSS/Tutorials/Using_CSS_animations) pour des informations détaillées sur les images clés d'animation CSS.

Implémentation

Voici un extrait avec des images clés ajoutées pour démontrer comment l'animation spin peut être implémenté efficacement :

HTML :

<code class="html"><div></div></code>

CSS :

<code class="css">div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}</code>

Dans ce code, nous définissons les images clés de l'animation "spin" à l'aide du "from" et les sélecteurs "vers". Ceux-ci précisent que l'élément commencera avec une rotation de 0 degré et tournera progressivement jusqu'à 360 degrés pendant la durée de l'animation.

En incorporant cette définition d'image clé, vous permettrez à l'animation de rotation de fonctionner comme prévu dans votre code. .

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!