Comment créer une animation en rotation continue en utilisant du CSS pur ?-tutoriel CSS-php.cn

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

Linda Hamilton

Libérer： 2024-11-05 10:24:02

original

500 Les gens l'ont consulté

How to create a continuously rotating animation using pure CSS?

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>

Copier après la connexion

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>

Copier après la connexion

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!