Comment créer une animation en rotation continue en utilisant du CSS pur ?

Animation de rotation sans fin à l'aide de CSS

Demande :

Faites pivoter une icône de chargement indéfiniment en utilisant pure CSS.

Code :

<code class="css">#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}</code>

Problème :

Le code fourni ne lance pas l'animation de rotation car attendu.

Solution :

Pour obtenir une rotation continue à l'aide de CSS, nous devons utiliser une animation. Dans ce cas, nous utilisons la règle @keyframes pour définir l'animation et la propriété CSS d'animation pour l'appliquer.

Code mis à jour :

<code class="css">@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

Ce code mis à jour définit l'animation rotative, qui consiste en une rotation de 360 ​​degrés sur une durée de 2 secondes. Le paramètre de nombre d'itérations infini garantit que l'animation se répète indéfiniment.

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!