Woraus besteht eine CSS-Animation?

CSS-Animation besteht aus drei Teilen: Keyframes, Animationseigenschaften und CSS-Eigenschaften. Keyframes werden verwendet, um den Status von Animationen in verschiedenen Phasen zu definieren; Animationseigenschaften werden verwendet, um die Wiedergabedauer, die Anzahl der Wiedergaben und die zum Abspielen von Animationen zu verwendende Funktion zu bestimmen; CSS-Attribute werden verwendet, um den Status von CSS-Elementen unter verschiedenen Keyframes anzugeben . .

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Animation besteht aus drei Teilen, nämlich Keyframes, Animationseigenschaften und CSS-Eigenschaften.

• Keyframes (Keyframes) – Definieren Sie den Status der Animation in verschiedenen Phasen.

• Animationseigenschaften (Eigenschaften) – Bestimmen Sie die Wiedergabedauer der Animation, die Wiedergabezeiten und welche Funktion zum Abspielen der Animation usw. verwendet werden soll. (Kann mit Audio- und Videoplayern verglichen werden)

• CSS-Attribute – geben den Status von CSS-Elementen unter verschiedenen Schlüsselbildern an.

1. Schlüsselbilder

werden mithilfe von @keyframes-Regeln angegeben, mit denen das Verhalten eines Zyklus von CSS-Animationen definiert und einfache Animationen erstellt werden können.

Animationen ähneln Übergängen darin, dass sie Darstellungen sich ändernder CSS-Eigenschaften im Laufe der Zeit darstellen. Der Hauptunterschied besteht darin, dass der Übergang implizit ausgelöst wird, wenn sich der Eigenschaftswert ändert (z. B. wenn sich der Eigenschaftswert beim Schweben ändert), die Animation jedoch explizit ausgeführt wird, wenn die animierte Eigenschaft angewendet wird. Daher müssen Animationen explizite Werte für animierte Eigenschaften anzeigen. Diese Werte werden durch die in der @keyframes-Regel angegebenen Animations-Keyframes definiert. Daher besteht die @keyframes-Regel aus einer Reihe gekapselter CSS-Stilregeln, die beschreiben, wie sich Eigenschaftswerte im Laufe der Zeit ändern.

2. Animationsattribute

Erstellen Sie eine Animation über @keyframes. Sie benötigen ein Animationsattribut (Animation), um die Animation auf Elemente anzuwenden, und legen Sie die Anzahl der Animationsiterationen fest, ob zwischen den Start- und Endwerten gewechselt werden soll, und Ob die Animation ausgeführt oder angehalten werden soll.

Unter Animationsattributen können die zugehörigen Funktionen des Players verstanden werden: Wiedergabe/Pause, Wiedergabedauer, Wiedergabereihenfolge (Rückwärts-/Vorwärts-/Alternativwiedergabe), Anzahl der Schleifen usw.

animation:
[animation-name] [animation-duration] // Name und Dauer der Animation
[animation-timing-function][animation-delay] // Funktion über Zeit (properties/t), Verzögerungszeit
[animation-iteration-count] [animation-direction] // Anzahl der Wiedergaben, Wiedergabereihenfolge
[animation-fill-mode] [animation-play-state] // Entsprechende Stile festlegen und Animation vor der Wiedergabe oder nach dem Stoppen steuern. Ausführen oder Pause

Syntax für Keyframe- und Animationseigenschaften:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Was steht in den geschweiften Klammern der @keyframes-Regel?

Innerhalb der geschweiften Klammern müssen wir Keyframes oder Wegpunkte definieren, die den Wert der animierten Eigenschaft an einem bestimmten Punkt während der Animation angeben. Dadurch können wir Zwischenschritte in der Animationssequenz steuern. Ein einfacher animierter @Keyframe kann beispielsweise so aussehen:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    background-color: red;
    }
}
.demo{
 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

Laufeffekt:

'0%', '50%', '100%' sind Keyframe-Selektoren, jeder Selector definiert eine Keyframe-Regel. Der Keyframe-Deklarationsblock einer Keyframe-Regel besteht aus Attributen und Werten.

Die obige Animation ähnelt einem einfachen Übergangseffekt: Die Hintergrundfarbe ändert sich ausgehend von einem Wert (0 %) zu Beginn der Animation, erreicht einen Wert (50 %) in der Mitte und erreicht am Ende einen anderen Wert (100 %). Ende der Animation. Die Keyframe-Selektoren „0 %, „50 %“ und „100 %“ definieren die Wegpunkte oder Prozentpunkte, an denen die animierte Eigenschaft ihren Wert ändern soll. Wir können auch die Selektorschlüsselwörter from, to anstelle von 0 % bzw. 100 % verwenden, sie sind gleichwertig.

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    background-color: red;
    }
}

Keyframe-Selektoren bestehen aus einem oder mehreren durch Kommas getrennten Prozentwerten oder den Von- und Bis-Schlüsselwörtern. Beachten Sie, dass für Prozentwerte der Einheitenbezeichner „Prozent“ verwendet werden muss. Daher ist „0“ ein ungültiger Keyframe-Selektor.

Unten sehen Sie ein Beispiel für eine Animation mit einem Keyframe-Selektor, der mehrere durch Kommas getrennte Prozentwerte und/oder die Schlüsselwort-Keyframe-Selektoren von und bis enthält.

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

Die @keyframes-Regel oben definiert: Der obere Versatz des Elements ist am Anfang, in der Mitte und am Ende der Animation gleich Null und beträgt bei einem Viertel und drei Viertel der Strecke 100 Pixel das Element Es bewegt sich in der Animationsschleife mehrmals auf und ab.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWoraus besteht eine CSS-Animation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!