Warum funktioniert meine CSS3-Spin-Animation in Chrome nicht?

CSS3-Spin-Animation

In Ihrem bereitgestellten HTML-Code haben Sie verschiedene CSS3-Animationseigenschaften auf ein div-Element angewendet. Allerdings scheint die Animation trotz Verwendung der neuesten stabilen Version von Chrome nicht zu funktionieren.

CSS3-Animation verstehen

Um CSS3-Animation effektiv zu nutzen, müssen Sie eine bestimmte Schrittfolge einhalten:

1. Animationseigenschaften definieren: Sie müssen die Animationseigenschaften für das Element definieren, z. B. Animationsname, Animationsdauer, Anzahl der Animationsiterationen und Animationszeitpunkt. Funktion, wie Sie es in Ihrem Code getan haben.
2. Animations-Keyframes definieren (fehlen in Ihrem Code): Sie müssen die tatsächlichen Animations-Keyframes mithilfe der @keyframes-Regel festlegen. Die Keyframes definieren, wie das Element an bestimmten Stellen während der Animationssequenz angezeigt werden soll.
3. Browserkompatibilität: Stellen Sie sicher, dass der von Ihnen verwendete Browser CSS3-Animation unterstützt. Die meisten modernen Browser, einschließlich Chrome, unterstützen diese Funktion.

Lösung: Keyframes hinzufügen

In Ihrem Code haben Sie die Animationseigenschaften, aber nicht die Animations-Keyframes definiert. Um dieses Problem zu beheben, fügen Sie die folgende Keyframes-Regel hinzu:

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

Diese Keyframes-Regel gibt an, dass sich das Element während der Animation von 0 Grad auf 360 Grad drehen soll.

Demo

Nachdem die Keyframes-Regel hinzugefügt wurde, sollte Ihr Code nun wie folgt aussehen:

<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>

Dieser Code sollte eine Spin-Animation für das div-Element erzeugen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine CSS3-Spin-Animation in Chrome nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!