Pourquoi mon animation Spin CSS3 ne fonctionne-t-elle pas dans Chrome ?

Animation Spin CSS3

Dans le code HTML fourni, vous avez appliqué diverses propriétés d'animation CSS3 à un élément div. Cependant, l'animation ne semble pas fonctionner malgré l'utilisation de la dernière version stable de Chrome.

Comprendre l'animation CSS3

Pour utiliser efficacement l'animation CSS3, vous devez respecter une séquence d'étapes spécifique :

1. Définir les propriétés de l'animation : Vous devez définir les propriétés d'animation de l'élément, telles que le nom de l'animation, la durée de l'animation, le nombre d'itérations d'animation et le timing de l'animation. fonction, comme vous l'avez fait dans votre code.
2. Définir les images clés d'animation (manquantes dans votre code) : Vous devez établir les images clés d'animation réelles à l'aide de la règle @keyframes. Les images clés définissent la façon dont l'élément doit apparaître à des moments spécifiques de la séquence d'animation.
3. Compatibilité du navigateur : Assurez-vous que le navigateur que vous utilisez prend en charge l'animation CSS3. La plupart des navigateurs modernes, y compris Chrome, prennent en charge cette fonctionnalité.

Solution : ajout d'images clés

Dans votre code, vous avez défini les propriétés de l'animation mais pas les images clés de l'animation. Pour résoudre ce problème, ajoutez la règle d'images clés suivante :

<code class="css">@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}</code>

Cette règle d'images clés spécifie que l'élément doit pivoter de 0 degrés à 360 degrés pendant l'animation.

Démo

Avec la règle des images clés ajoutée, votre code devrait maintenant être le suivant :

<code class="html"><div>
</div></code>

<code class="css">div {
    ... (same animation properties as before)
}

@-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);
    }
}</code>

Ce code devrait produire une animation de rotation pour l'élément div.

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!