Verwendung von @keyframes zum Erstellen von Animationen in CSS3, erklärt anhand von Beispielen

Animierte Eigenschaften können sich schrittweise von einem Wert zum anderen ändern, z. B. Größe, Menge, Prozentsatz und Farbe. Verwenden Sie @keyframes, um Animationen zu erstellen, indem Sie schrittweise eine CSS-Stileinstellung in eine andere ändern. Animation wird auch häufig in der Arbeit verwendet. Als Nächstes werde ich die Verwendung von Animationen vorstellen.

1. @keyframes-Syntaxregeln
Während des Animationsprozesses kann der CSS-Stil mehrmals geändert werden. Geben Sie an, wann eine Änderung erfolgt, indem Sie % oder die Schlüsselwörter „von“ und „bis“ verwenden, die mit 0 % bis 100 % identisch sind. 0 % bedeutet, dass die Animation beginnt, 100 % bedeutet, dass die Animation beendet ist. Für eine optimale Browserunterstützung sollten Selektoren immer als 0 % und 100 % definiert werden.

@keyframes ist eine Animation, die als eine aus mehreren Transformationen bestehende Gruppe verstanden werden kann.
Syntax:
@keyframes Animationsname{
von{ css1}
bis{ css2 }
}

@keyframes Animationsname{
0% {css1}
50 % {css2}
100 % {css3}
}
Hinweis: Verwenden Sie das Animationsattribut, um das Erscheinungsbild der Animation zu steuern, und verwenden Sie auch den Selektor, um die Animation zu binden.

2. Animationsattributwert

Animation verwenden, wenn diese Animation aufgerufen wird. Animation besteht aus sechs Attributen:

Animationsname gibt den Schlüssel an, der an den Selektor gebunden werden soll des Frames
animation-duration Die Animation gibt an, wie viele Sekunden oder Millisekunden es dauert, bis sie abgeschlossen ist
animation-timing-function Legt fest, wie die Animation einen Zyklus abschließt
animation-delay Legt das Verzögerungsintervall vor der Animation fest startet
animation -iteration-count Definieren Sie, wie oft die Animation abgespielt wird
animation-direction Geben Sie an, ob die Animation der Reihe nach in umgekehrter Reihenfolge abgespielt werden soll
animation: Animationsname Die Anzahl der verzögerten Wiedergaben am Anfang der Zeit-Geschwindigkeitskurve Abwechselnd rückwärts spielen
Nehmen Sie ein Beispiel:

Lassen Sie das Quadrat von der oberen linken Ecke zur oberen rechten Ecke und dann zur unteren rechten Ecke verlaufen in die untere linke Ecke und schließlich zurück in die obere linke Ecke, und die Farbe ändert sich ebenfalls entsprechend

div{animation:mymove 5s infinite;
 -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
 0%   {top:0px; left:0px; background:red;}
 25%  {top:0px; left:100px; background:blue;}
 50%  {top:100px; left:100px; background:yellow;}
 75%  {top:100px; left:0px; background:green;}
 100% {top:0px; left:0px; background:red;}
}

oben. Der Inhalt führt in die Verwendung von Animationen ein, aber Sie müssen es noch selbst tun, mehr klopfen und Probieren Sie verschiedene Effekte aus!

Das obige ist der detaillierte Inhalt vonVerwendung von @keyframes zum Erstellen von Animationen in CSS3, erklärt anhand von Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!