Welche Regeln in CSS3 werden zum Definieren von Animationen verwendet?

Verwenden Sie die „@keyframes“-Regel in CSS3, um Animationen zu definieren. Die „@keyframes“-Regel wird verwendet, um Animationsregeln festzulegen, die das Verhalten eines Zyklus einer CSS-Animation definieren und einfache Zwischenschritte während des Animationssequenzzyklus erstellen können, indem Keyframes entlang der Animationssequenz festgelegt werden.

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

@keyframes ist eine CSS3-Regel, mit der das Verhalten eines Zeitraums 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.

Mithilfe verschiedener CSS-Animationseigenschaften können Sie dann viele verschiedene Aspekte der Animation steuern, einschließlich der Anzahl der Iterationen der Animation, ob zwischen Start- und Endwerten gewechselt wird und ob die Animation ausgeführt oder angehalten werden soll. Animationen können auch ihre Startzeit verzögern.

Eine @keyframe-Regel besteht aus dem Schlüsselwort „@keyframe“, gefolgt von einem Bezeichner, der den Namen der Animation angibt (auf den mit „animation-name“ verwiesen wird), gefolgt von einer Reihe von Stilregeln (getrennt durch geschweifte Klammern). Die Animation wird dann auf das Element angewendet, indem der Bezeichner als Wert des Attributs „animation-name“ verwendet wird.

Syntax:

@keyframes animation-name {keyframes-selector {css-styles;}}

• animation-name: Dies ist erforderlich, es definiert den Animationsnamen. animation-name：这是必需的，它定义动画名称。

• keyframes-selector

keyframes-selector: Definiert den Prozentsatz der Animation, der zwischen 0 % und 100 % liegt. Eine Animation kann viele Selektoren enthalten.

/* 定义动画n */
@keyframes your-animation-name {
    /* style rules */
}
/* 将其应用于元素 */
.element {
    animation-name: your-animation-name;
    /* 或者使用动画速记属性 */
    animation: your-animation-name 1s ...
}

In geschweiften Klammern definieren Sie Keyframes oder Wegpunkte, die den Wert der Eigenschaft angeben, die an bestimmten Punkten während der Animation animiert werden soll. Dadurch können Sie Zwischenschritte in der Animationssequenz steuern. Ein einfacher animierter @keyframe könnte beispielsweise so aussehen:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}

0%“ und „100%“ sind Keyframe-Selektoren, die jeweils eine Keyframe-Regel definieren. Der Keyframe-Deklarationsblock für eine Keyframe-Regel besteht aus den Attributen und

You Sie können anstelle von 0 % bzw. 100 % auch die Selektorschlüsselwörter „von“ und „bis“ verwenden, da diese äquivalent sind.

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

Keyframe-Selektoren bestehen aus einem oder mehreren durch Kommas getrennten Prozentwerten oder bestehen aus den Schlüsselwörtern „von“ und „bis“. Für den Prozentwert muss der Bezeichner verwendet werden. „0“ ist ein ungültiger Keyframe-Selektor (Lernvideo-Freigabe:

CSS-Video-Tutorial)

Hinweis: Für eine optimale Browserunterstützung geben Sie immer 0 % und 100 %-Selektoren an Beispiel für die CSS-Nutzung reee 3. Laufeffekte

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideo

!

Das obige ist der detaillierte Inhalt vonWelche Regeln in CSS3 werden zum Definieren von Animationen verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!