Comment créer une animation de rotation CSS sans fin pour le chargement d'icônes ?

Animation de rotation CSS sans fin

Les icônes de chargement sont essentielles à l'expérience utilisateur, fournissant un retour visuel lors du chargement du site Web. La personnalisation de la rotation de ces icônes à l'aide de CSS peut améliorer leur fonctionnalité et leur esthétique. Cependant, la mise en œuvre d'une rotation infinie avec CSS peut s'avérer difficile.

Considérons l'exemple suivant :

#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;
}

<div id="test" class="rotating"></div>

Bien que ce CSS semble intuitif, il ne parvient pas à produire la rotation infinie prévue pour le icône de chargement. Pour obtenir une rotation sans fin, l'animation doit être appliquée à l'aide d'images clés au lieu de transformations.

Le CSS corrigé à l'aide d'images clés suit :

@-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;
}

Ce code corrigé assure une rotation fluide et continue de l'icône de chargement indéfiniment, améliorant sa fonctionnalité et son attrait visuel.

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!