css3-Animation, Ballrollen, js-Steuerung, Animationspause

Mit CSS3 können Animationen erstellt werden, die viele animierte Bilder, Flash-Animationen und JavaScript-Effekte auf Webseiten ersetzen können.

CSS3 @keyframes Regel

Um CSS3-Animationen zu erstellen, müssen Sie die @keyframes-Regel verstehen.

Die @keyframes-Regel erstellt Animationen.

@keyframes gibt einen CSS-Stil innerhalb der Regel an und die Animation wechselt schrittweise vom aktuellen Stil zum neuen Stil.

@keyframes myfirst /* myfirst ist der Name der Animation*/
{
    von {background: red;}
    zu {Hintergrund: gelb;}
}
@-webkit-keyframes myfirst /* Safari und Chrome */
{
    von {background: red;}
    zu {Hintergrund: gelb;}
}

CSS3-Animation

Wenn Sie eine Animation in @keyframes erstellen, binden Sie sie an einen Selektor, sonst hat die Animation keine Wirkung.

Geben Sie mindestens diese beiden CSS3-Animationseigenschaften an, um sie an einen Selektor zu binden:

• Gibt den Namen der Animation an
• Gibt die Dauer der Animation an

Beispiel: Bündeln Sie die „myfirst“-Animation zu einem Div-Element mit einer Dauer von 5 Sekunden.

div
{
    Animation: meine ersten 5er;
    -webkit-animation: myfirst 5s; /* Safari und Chrome */
}

Hinweis: Sie müssen den Namen der Animation und die Dauer der Animation festlegen. Wenn Sie die Dauer weglassen, wird die Animation nicht ausgeführt, da der Standardwert 0 ist.

Was ist CSS3-Animation?

Animation ist der Effekt der schrittweisen Änderung eines Elements von einem Stil in einen anderen.

Sie können so viele Stile ändern, wie Sie möchten, und zwar so oft Sie möchten.

Geben Sie bitte den Zeitpunkt der Änderung in Prozent an oder verwenden Sie die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen.

0 % ist der Beginn der Animation und 100 % ist das Ende der Animation.

Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.

Beispiel: Ändern Sie die Hintergrundfarbe, wenn die Animation 25 % und 50 % erreicht hat, und dann noch einmal, wenn die Animation zu 100 % abgeschlossen ist:

@keyframes mein erstes
{
    0 % {Hintergrund: rot;}
    25 % {Hintergrund: gelb;}
    50 % {Hintergrund: blau;}
    100 % {Hintergrund: grün;}
}
@-webkit-keyframes myfirst /* Safari und Chrome */
{
    0 % {Hintergrund: rot;}
    25 % {Hintergrund: gelb;}
    50 % {Hintergrund: blau;}
    100 % {Hintergrund: grün;}
}

Als nächstes folgt eine kleine Übung, die ich geschrieben habe. Durch CSS-Animation rollt der Ball unendlich über das Gras und es werden zwei Schaltflächen hinzugefügt, um das Ausführen und Anhalten der Animation zu steuern (der rote Ball oben ist die Sonne, die ich 2333 gezeichnet habe).

Zusammenfassen

Oben sehen Sie die vom Editor eingeführte CSS3-Animation Ball Rolling JS-Steuerungs-Animationspause. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!