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

Animation de rotation CSS3

Dans cet article, nous allons résoudre un problème avec une animation de rotation CSS3 qui ne fonctionne pas comme prévu. L'utilisateur a l'intention de faire pivoter une image de 360 ​​degrés indéfiniment, mais l'image reste immobile.

Examinons le CSS fourni pour identifier la cause :

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}

Après avoir examiné le CSS, nous' J'ai identifié quelques domaines dans lesquels des ajustements sont nécessaires pour que l'animation fonctionne. correctement :

• Float : La propriété float: left n'est pas requise pour que l'animation fonctionne. Supprimez-le.
• Position : La propriété position: Absolute entraîne un mauvais positionnement de l'image. Changez-le en position : fixe.
• Margin : Les propriétés margin-top et margin-left sont utilisées pour centrer l'image, mais elles ne sont pas nécessaires pour l'animation. Supprimez-les.
• Propriétés de l'animation : Les propriétés de l'animation semblent correctes, à l'exception de l'image clé elle-même. Dans la règle @keyframes, il manque une image clé from avec les mêmes propriétés de transformation que l'image clé to.

Voici le CSS corrigé :

.image {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;

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

Avec ces ajustements, l'image devrait maintenant tourner doucement autour de son centre.

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!