CSS
Animationen

Syntax

• transition: <property> <duration> <timing-function> <delay>;
• @keyframes <identifier>
• [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

Parameter

Animationen mit der Übergangseigenschaft

Die CSS- transition nützlich für einfache Animationen. Sie ermöglicht die Animation von nummerischen CSS-Eigenschaften zwischen Zuständen.

Beispiel

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

Zeige Ergebnis

Wenn Sie den .Example über ein Element mit der Klasse .Example , springt die .Example sofort auf 120px und die Hintergrundfarbe auf Rot ( #ff0000 ).

Durch das Hinzufügen der transition können diese Änderungen im Laufe der Zeit auftreten:

.Example{
    ...
    transition: all 400ms ease;
}

Zeige Ergebnis

Der Wert all wendet den Übergang auf alle kompatiblen (auf Zahlen basierenden) Eigenschaften an. Jeder kompatible Eigenschaftsname (z. B. height oder top ) kann für dieses Schlüsselwort verwendet werden.

400ms gibt an, wie viel Zeit der Übergang benötigt. In diesem Fall dauert die Änderung der Höhe des Elements 400 Millisekunden.

Schließlich wird der Wert ease ist die Animationsfunktion, die bestimmt , wie die Animation abgespielt wird. ease bedeutet, langsam zu beginnen, zu beschleunigen und wieder langsam zu beenden. Andere Werte sind linear , ease-out und ease-in .

Browserübergreifende Kompatibilität

Die transition wird im Allgemeinen von allen großen Browsern mit Ausnahme von IE 9 gut unterstützt. Verwenden Sie für frühere Versionen von Firefox- und Webkit-basierten Browsern die Herstellerpräfixe wie folgt:

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

Hinweis: Die transition kann Änderungen zwischen zwei beliebigen numerischen Werten unabhängig von der Einheit animieren. Es kann auch zwischen Einheiten 100px , z. B. 100px bis 50vh . Es kann jedoch nicht zwischen einer Zahl und einem Standardwert oder einem automatischen Wert 100px werden, z. B. die Höhe eines Elements von 100px auf auto .

Steigerung der Animationsleistung mithilfe des Attributs `will-change`

Beim Erstellen von Animationen und anderen GPU-schweren Aktionen ist es wichtig, das Attribut " will-change zu verstehen.

Beide CSS-Keyframes und die transition verwenden die GPU-Beschleunigung. Die Leistung wird erhöht, indem Berechnungen auf die GPU des Geräts geladen werden. Dazu erstellen Sie Malebenen (Teile der Seite, die einzeln gerendert werden), die zur Berechnung an die GPU ausgelagert werden. Die will-change Eigenschaft teilt dem Browser mit, was animiert wird, wodurch der Browser kleinere Farbbereiche erstellen kann, wodurch die Leistung erhöht wird.

Die will-change Eigenschaft akzeptiert eine durch Kommas getrennte Liste von Eigenschaften, die animiert werden sollen. Wenn Sie beispielsweise ein Objekt transformieren und seine Deckkraft ändern möchten, geben Sie Folgendes an:

.Example{
    ...
    will-change: transform, opacity;
}

Hinweis: Verwenden Sie nur will-change . Das Festlegen will-change für jedes Element auf einer Seite kann zu Leistungsproblemen führen, da der Browser möglicherweise versucht, Farbebenen für jedes Element zu erstellen, wodurch der Verarbeitungsaufwand der GPU erheblich erhöht wird.

Animationen mit Keyframes

Für mehrstufige CSS-Animationen können Sie CSS @keyframes erstellen. Mit Keyframes können Sie mehrere Animationspunkte, so genannte Keyframes, definieren, um komplexere Animationen zu definieren.

Basisbeispiel

In diesem Beispiel erstellen wir eine grundlegende Hintergrundanimation, die zwischen allen Farben wechselt.

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Zeige Ergebnis

Hier gibt es einige verschiedene Dinge zu beachten. Zuerst die eigentliche @keyframes Syntax.

@keyframes rainbow-background{

Damit wird der Name der Animation auf rainbow-background .

0%     { background-color: #ff0000; }

Dies ist die Definition für ein Keyframe innerhalb der Animation. Der erste Teil, in diesem Fall 0% , definiert, wo sich der Keyframe während der Animation befindet. Die 0% bedeuten, dass es 0% der gesamten Animationszeit von Anfang an ist.

Die Animation wechselt automatisch zwischen den Keyframes. 8.333% die nächste Hintergrundfarbe auf 8.333% , benötigt die Animation 8,333% der Zeit, um zwischen diesen Keyframes zu wechseln.

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Mit diesem Code wird unsere Animation an alle Elemente .RainbowBackground die über die Klasse .RainbowBackground verfügen.

Die tatsächliche Animationseigenschaft akzeptiert die folgenden Argumente.

• Animationsname : Der Name unserer Animation. In diesem Fall rainbow-background
• Animationsdauer : Wie lange dauert die Animation, in diesem Fall 5 Sekunden.
• Anzahl der Animations-Iterationen (optional) : Gibt an, wie oft die Animation wiederholt wird. In diesem Fall wird die Animation unbegrenzt fortgesetzt. Standardmäßig wird die Animation einmal abgespielt.
• Animationsverzögerung (optional) : Gibt an, wie lange gewartet werden soll, bevor die Animation beginnt. Der Standardwert ist 0 Sekunden und kann negative Werte annehmen. Zum Beispiel würde -2s die Animation 2 Sekunden in ihre Schleife starten.
• Animations-Timing-Funktion (optional) : Bestimmt die Geschwindigkeitskurve der Animation. Die Standardeinstellung ist " ease , wenn die Animation langsam beginnt, schneller wird und langsam endet.

In diesem speziellen Beispiel geben sowohl die 0% als auch die 100% { background-color: #ff0000; } . Wenn zwei oder mehr Keyframes einen Zustand gemeinsam haben, können sie in einer einzigen Anweisung angegeben werden. In diesem Fall könnten die beiden 0% und 100% Zeilen durch diese eine Zeile ersetzt werden:

0%, 100%     { background-color: #ff0000; }

Browserübergreifende Kompatibilität

Bei älteren WebKit-basierten Browsern müssen Sie das Herstellerpräfix sowohl für die @keyframes Deklaration als auch für die animation

@-webkit-keyframes{}

-webkit-animation: ...

Syntax-Beispiele

Unser erstes Syntaxbeispiel zeigt die Animationskürzel-Eigenschaft unter Verwendung aller verfügbaren Eigenschaften / Parameter:

  animation: 3s         ease-in           1s      2                 reverse     both        paused       slidein;
  /*         duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name   */

Unser zweites Beispiel ist etwas einfacher und zeigt, dass einige Eigenschaften weggelassen werden können:

  animation: 3s         linear            1s      slidein;
  /*         duration | timing-function | delay | name   */

Unser drittes Beispiel zeigt die minimalste Deklaration. Beachten Sie, dass der Name der Animation und die Dauer der Animation angegeben werden müssen:

  animation: 3s         slidein;
  /*         duration | name */

Es ist auch erwähnenswert, dass bei der Verwendung der Animationskurzschrift die Reihenfolge der Eigenschaften einen Unterschied macht. Natürlich kann der Browser Ihre Dauer mit Ihrer Verzögerung verwechseln.

Wenn Kürze nicht Ihr Ding ist, können Sie auch die Abkürzungseigenschaft überspringen und jede Eigenschaft einzeln schreiben:

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;