Pourquoi mon animation de rotation d'image CSS3 ne fonctionne-t-elle pas ?

Animation de rotation CSS3 : résolution des problèmes CSS liés à la rotation d'images

Les animations CSS3 fournissent un outil puissant pour créer des expériences Web dynamiques et visuellement attrayantes. Un cas d'utilisation courant consiste à faire pivoter une image ou un élément à l'aide de la propriété transform. Cependant, un CSS incorrect peut empêcher l'animation de fonctionner correctement.

Un exemple d'un tel problème est fourni, où une image est destinée à pivoter à 360 degrés mais reste statique. Le problème réside dans le CSS fourni.

Le CSS correct

Pour résoudre le problème, le CSS révisé suivant a été créé :

.image {

position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;

}
@-moz-keyframes spin {

100% { -moz-transform: rotate(360deg); } 

}
@-webkit-keyframes spin {

100% { -webkit-transform: rotate(360deg); } 

}
@keyframes spin {

100% { 
    -webkit-transform: rotate(360deg); 
    transform:rotate(360deg); 
} 

}

La principale différence réside dans la propriété margin et la suppression des états from et to de l'animation. images clés.

Explication

La propriété margin positionne correctement l'image au centre de la page. La propriété transform, qui applique la rotation, est définie pour toutes les images de l'animation en utilisant l'état 100 %. En supprimant les états de et vers, l'animation devient plus fluide, évitant une transition brusque au début et à la fin de la rotation.

Avec ces modifications mises en œuvre, l'image animée devrait désormais tourner de manière fluide et continue.

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!