Pourquoi mon animation de rotation CSS3 ne fonctionne-t-elle pas ?-tutoriel CSS-php.cn

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

DDD

Libérer： 2024-12-08 20:23:14

original

849 Les gens l'ont consulté

Why Isn't My CSS3 Rotate Animation Working?

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

Copier après la connexion

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

Copier après la connexion

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!