Animieren von Schnittstellen mit CSS. CSS-Animation für die Kleinen CSS mehrere Animationen

). CSS3 bietet uns ein weiteres leistungsfähigeres Animationstool, das über nur einen Übergang hinausgeht und uns das Erstellen ermöglicht unbegrenzte Anzahl solcher Übergänge.

Mit anderen Worten: Animation ermöglicht es uns, uns zu bewegen eins Zustand (Satz von Eigenschaften) zu zweite, aus zweite Zu dritte, und spielen Sie die Animation bei Bedarf auch in umgekehrter Reihenfolge ab, wenn die Anzahl der Übergänge abgeschlossen ist.

Ähnlich wie bei Übergangseffekten müssen Sie, damit eine Animation abgespielt werden kann, ihre Wiedergabe auslösen, sei es beim ersten Laden der Seite oder wenn ein Element den Fokus erhält, wenn der Mauszeiger über einem Element schwebt usw.

Phasen der Animationserstellung

Schauen wir uns an, woraus der Prozess der Animationserstellung in CSS besteht. Zunächst müssen Sie die Schlüsselbilder der Animation definieren. Was ist ein Keyframe? Stellen Sie sich ein Element vor, das links vom Browserfenster positioniert ist, und Sie müssen es in die Mitte des Fensters animieren und an seine ursprüngliche Position zurückbringen. Für diese Animation benötigen wir drei Keyframes:

• Erste– definiert die Anfangsposition des Elements.
• Zweite– bestimmt die Position des Elements, nachdem es in die Mitte des Fensters verschoben wurde.
• Dritte– definiert den Endpunkt der Animation (die Startposition des Elements).

Sobald die erforderlichen Keyframes definiert sind, obliegt es dem Browser des Benutzers, alle Zwischenphasen zu zeichnen, die wir mithilfe der Keyframes definiert haben. Das heißt, die Aufgabe, das Element in diesen Intervallen zu zeichnen, liegt allein beim Browser; unsererseits müssen wir nur diese Animationspunkte angeben, oder mit anderen Worten, wir müssen dem Browser mitteilen, wie er sich von einem Stil zum anderen ändern soll zwischen Schlüsselbildern.

Der nächste Schritt besteht darin, dem oder den Elementen, an denen wir interessiert sind, eine Animation zuzuweisen. In diesem Fall ist es möglich, für jedes Element individuelle Animationseinstellungen festzulegen.

Später in diesem Artikel werden wir uns ausführlich damit befassen, wie man eine Animationsverzögerung einstellt, wie man die Anzahl der Animationszyklen einstellt, ihre Dauer festlegt, ihre Geschwindigkeit und Richtung angibt, den Status der Animation im aktuellen Moment und sogar bestimmt Der Stil für ein Element zu einem Zeitpunkt, an dem die Animation nicht abgespielt wird. .

Bevor wir zum Erstellen von Animationen übergehen, möchte ich Sie auf die aktuelle Unterstützung von Animationseigenschaften in Browsern aufmerksam machen:

Schlüsselbilder definieren

Das Ergebnis unseres Beispiels:

Betrachten Sie das folgende Beispiel, in dem wir mehrere verschiedene Animationen erstellen und sie einem Element zuweisen.

In diesem Beispiel haben wir mehrere Animationen erstellt, in denen die Breite des Elements allmählich zunimmt, sich die Hintergrundfarbe ändert und das Element relativ zu seiner Achse negativ geneigt ist X(horizontale Achse) zur Mitte der Animation und das Element schrumpft gegen Ende der Animation auf die ursprüngliche Größe des Elements, was mit einer Änderung der Hintergrundfarbe und der Neigung des Elements entlang der Achse einhergeht X umgedreht.

Das Ergebnis unseres Beispiels:

Anzahl der Animationszyklen

Standardmäßig wird jede Animation in CSS abgespielt nur einmal. Dank der Eigenschaft „animation-iteration-count“ können wir angeben, wie oft die Animationsschleife abgespielt wird. Dies kann beliebig oft sein, oder wir können angeben, dass die Animation auf unbestimmte Zeit abgespielt wird, in einigen Fällen auch so ist sehr nützlich.

Bitte beachte, dass es ist verboten, darauf hinzuweisen negative Werte Aus objektiven Gründen ist es jedoch zulässig, nicht ganzzahlige Werte anzugeben. In diesem Fall wird nur ein Teil des Animationszyklus abgespielt – im Verhältnis zum angegebenen Wert (z. B. der Wert 1.5 entspricht dem anderthalbmaligen Abspielen des Animationszyklus).

Betrachten Sie das folgende Beispiel:

In diesem Beispiel haben wir erstellt einfache Animation, in dem mit mit CSS Top-Eigenschaften verschieben Elemente mit relativer Positionierung relativ zum oberen Rand der aktuellen Position und ändern gleichzeitig die Hintergrundfarbe des Elements.

Grüße Freunde! Heute befassen wir uns mit einem sehr interessanten Thema – dem Erstellen von CSS-Animationen anhand eines realen Beispiels. Der Höhepunkt dieses Tutorials wird die Erstellung einer wunderschönen CSS-Animation des Million-Dollar-Logos sein.

Cool

Stammeln

Unterrichtsmaterialien

• Quellen: Herunterladen
• Grundlegendes Beispiel aus der Lektion: https://codepen.io/agragregra/pen/PKNavm
• Startvorlage aus der Lektion: https://github.com/agragregra/optimizedhtml-start-template

Eine kleine Theorie

Bevor Sie mit der Erstellung eines animierten Beispiels beginnen, sollten Sie sich mit den Grundlagen befassen CSS-Animationen, berücksichtigen Sie grundlegende Begriffe, Eigenschaften und Regeln CSS-Erstellung Animationen.

Wenn Sie Erfahrung mit der Erstellung von Animationen in einer Anwendung wie Adobe After Effects oder dem veralteten Flash Professional (jetzt Adobe Animate) haben, sollten Sie mit Konzepten wie „Keyframes“, „Timing-Funktionen oder Bewegungsdynamik“ vertraut sein. die, wie in jedem anderen Bereich der Animation, auch auf die Animation von Elementen auf einer Seite mittels CSS anwendbar sind. Anders als bei der Arbeit mit Anwendungsschnittstellen erstellen Sie Ihre CSS-Animationen jedoch, indem Sie Code in einem Editor schreiben.

CSS-Regel @keyframes

Das Erstellen einer CSS-Animation beginnt mit der Deklaration des Namens der Animation in einem Block @keyframes und Definieren sogenannter Animationsschritte oder Keyframes.

Um die Theorie und Grundlagen zu überprüfen, verwenden wir reines CSS und später anhand eines komplexeren Beispiels den Sass-Präprozessor. In der Lektion erfahren Sie mehr über Sass. Darüber hinaus empfehle ich für ein tieferes Verständnis der CSS-Grundlagen auch die Lektüre der Lektionen „CSS-Grundlagen – Ein Leitfaden für die Kleinen“ und „Alle CSS-Selektoren in einer Lektion“.

Schauen wir uns die @keyframes-Struktur und die Arbeit mit Keyframes an einfaches Beispiel:

@keyframes Drehen ( 0 % ( Randradius: 0 0 0 0; Transformation: Drehen (0 Grad); ) 25 % ( Randradius: 50 % 0 0 0; Transformation: Drehen (45 Grad); ) 50 % ( Rand- Radius: 50 % 50 % 0 0; transformieren: drehen (90 Grad); ) 75 % ( Randradius: 50 % 50 % 50 % 0; transformieren: drehen (135 Grad); ) 100 % ( Randradius: 50 % 50 % 50 % 50 %; transformieren: drehen (180 Grad); ) )

In der ersten Zeile sehen wir, dass hinter dem Schlüsselwort @keyframes der Name „turning“ steht. Dies ist der Name des Frameframe-Blocks, auf den wir weiter unten eingehen werden.

Nach der Deklaration öffnet sich eine geschweifte Klammer (in diesem Beispiel on reines CSS), in dem die Eigenschaften für jeden Schlüsselrahmen sequentiell von 0 % bis 100 % geschrieben werden. Bitte beachten Sie, dass Sie zwischen 0 % und 100 % beliebig viele Zwischenwerte einfügen können, sei es 50 %, 75 % oder sogar 83 %. Dies ist der Zeitleiste einer Animationsanwendung sehr ähnlich, wo Sie jeden Zwischenzustand zwischen zwei Zuständen hinzufügen können.

Dieser Codeblock mit Keyframes kann dann auf jeden angewendet werden CSS-Selektor, aber meistens werden sie für einen bestimmten Selektor vorbereitet, wenn wir ein bestimmtes Verhalten des gewünschten Blocks erreichen wollen.

Auf einen Block von Schlüsselbildern zugreifen

Nachdem wir Schlüsselbilder für das Objekt festgelegt haben (im wirklichen Leben geschieht dies parallel oder sogar nach dem Zugriff auf den Block mit Schlüsselbildern), können wir auf unseren neu erstellten Block zugreifen. Schauen wir uns den folgenden einfachen Code aus dem obigen Beispiel an:

Div (Breite: 120px; Höhe: 120px; Hintergrundfarbe: violett; Rand: 100px; Animation: Drehen 2s Easy-Out 1s unendlich abwechselnd; )

Bis zur letzten Zeile nichts Besonderes. Hier legen wir fest, wie das Objekt zunächst aussehen wird, und beziehen uns in der letzten Zeile des Blocks auf den Block mit Schlüsselbildern namens „Drehen“:

Animation: Drehen 2 Sek. leichtgängig, 1 Sek. unendlich abwechselnd;

Wenn bei der Definition von Keyframes alles relativ klar ist, dann bedarf diese Zeile sofort einer Erklärung. Wie wir sehen, gilt: Wer zuerst kommt CSS-Eigenschaft"Animation". Dabei handelt es sich um eine Kurzform, etwa die Eigenschaft „margin: 20px 30px 40px 50px“, die in mehrere separate Eigenschaften unterteilt werden kann:

Durch diese Analogie kann die zusammengesetzte Eigenschaft „Animation“ in mehrere separate Eigenschaften unterteilt werden:

In den meisten Fällen schreiben erfahrene Entwickler nicht alle diese Eigenschaften separat, sondern verwenden eine kurze Notation, deren Struktur wie folgt lautet:

Animation: (1. Animationsname - Name) (2. Animationsdauer - Dauer) (3. Animations-Timing-Funktionsdynamik der Bewegung) (4. Animationsverzögerung - Pause vor dem Start) (5. Animationsiteration- count – Anzahl der Ausführungen) (6. Animationsrichtung – Richtung)

Animation: Animationsname 2s linear 1s unendlich rückwärts

Aus dem Beispiel sehen wir, dass wir auf den @keyframes-Animationsname-Block zugreifen, die Dauer der Animation auf 2 Sekunden einstellen, die Dynamik linear ist, die Pause vor dem Start 1 Sekunde beträgt, die Animation endlos wiederholt und in die entgegengesetzte Richtung ausgeführt wird.

Wie ich bereits sagte, beginnt die Kurzschreibweise mit der Eigenschaft „ Animation", gefolgt von Werten, deren Reihenfolge man besser nicht vergessen sollte, damit beim Schreiben von CSS-Animationen keine Verwirrung entsteht.

Die meisten dieser Eigenschaften können jedoch weggelassen werden, da ihre Standardwerte in den meisten Fällen die meisten Aufgaben zur Animationserstellung vollständig erfüllen. Einige davon sind möglicherweise nicht geschrieben, der Rest sollte jedoch in der zuvor besprochenen Reihenfolge angegeben werden. Damit Ihre Animation funktioniert, benötigen Sie im Allgemeinen nur zwei Parameter in Ihrer zusammengesetzten Eigenschaft – den Namen ( Animationsname) und Dauer ( Animationsdauer).

Je näher wir der Benutzeroberfläche kommen, desto verständlicher wird sie für den Benutzer. Im Leben passiert fast nichts sofort – wenn wir vor dem Schlafengehen eine Dose Limonade öffnen oder die Augen schließen, beobachten wir eine Reihe von Zwischenzuständen und nicht ein scharfes „Offen/Geschlossen“, wie es im Internet passiert.

In meinem Artikel teile ich mein Wissen über CSS-Animationen und wie man damit arbeitet. Animationen verleihen Websites Dynamik und verbessern das Verständnis ihrer Fähigkeiten. Es erweckt Webseiten zum Leben und hilft bei der Benutzerinteraktion. Im Gegensatz zu CSS3-Übergängen basieren CSS-Animationen auf Keyframes. Damit können Sie Effekte für eine bestimmte Zeit abspielen und wiederholen sowie die Animation innerhalb der Schleife automatisch stoppen.

Eine Animation ist eine Reihe von Keyframes oder in CSS gespeicherten Keyframes:

@keyframes Animationstest ( 0 % ( Breite: 100 Pixel; ) 100 % ( Breite: 200 Pixel; ) )

Schauen wir uns an, was hier vor sich geht. Das Schlüsselwort @keyframes bezeichnet die Animation selbst. Dann kommt der Name der Animation, in unserem Fall animation-test. Die geschweiften Klammern enthalten eine Liste von Keyframes. Wir verwenden einen Startrahmen von 0 % und einen Endrahmen von 100 % (sie können auch als „von“ und „bis“ geschrieben werden).
Schauen Sie sich den Code unten an. Animationen können auch auf diese Weise eingestellt werden:

@keyframes Animationstest ( von ( Breite: 0; ) 25 % ( Breite: 75 Pixel; ) 75 % ( Breite: 150 Pixel; ) bis ( Breite: 100 %; ) )

Denken Sie daran: Wenn kein Start- oder Endbild angegeben ist, erkennt der Browser diese automatisch, als ob keine Animation auf sie angewendet worden wäre.

Sie können eine Animation wie folgt mit einem Element verbinden:

Elementselektor (Animationsname: Ihr-Animationsname; Animationsdauer: 2,5 Sekunden;)

Die Eigenschaft „animation-name“ gibt den Namen für die @keyframes-Animation an. Die Animationsdauerregel gibt die Dauer der Animation in Sekunden (1 s, 30 s, 0,5 s) oder Millisekunden (600 ms, 2500 ms) an.

Sie können Keyframes auch gruppieren:

@keyframes Animationstest ( 0 %, 35 % ( Breite: 50 Pixel; ) 75 % ( Breite: 200 Pixel; ) 100 % ( Breite: 100 %; ) )

Sie können mehrere Animationen auf ein Element (Selektor) anwenden. Ihre Namen und Parameter sollten in der Reihenfolge ihrer Anwendung geschrieben werden:

Elementselektor (Animationsname: Animationsname-1, Animationsname-2; Animationsdauer: 1s, 3s;)

Animationsverzögerung:

Die Eigenschaft „animation-delay“ gibt die Verzögerung vor der Wiedergabe der Animation in Sekunden oder Millisekunden an:

Elementselektor (Animationsname: Animationsname-1; Animationsdauer: 3 Sekunden; Animationsverzögerung: 2 Sekunden; /* Es vergehen 2 Sekunden, bevor die Animation beginnt */)

Animation wiedergeben:

Mit „animation-iteration-count“ können wir angeben, wie oft die Animation wiederholt wird: 0, 1, 2, 3 usw. Oder unendlich für eine Schleife:

Elementselektor (Animationsname: Animationsname-1; Animationsdauer: 3 Sekunden; Animationsverzögerung: 4 Sekunden; Anzahl der Animationsiterationen: 5; /* Animation wird 5 Mal abgespielt */)

Elementstatus vor und nach der Animation:

Mit der Eigenschaft „animation-fill-mode“ kann festgelegt werden, in welchem ​​Zustand sich das Element vor Beginn und nach Ende der Animation befinden soll:

Animationsfüllmodus: vorwärts;– Das Animationselement befindet sich nach Abschluss/Wiedergabe im letzten Keyframe-Status.

A Animationsfüllmodus: rückwärts;- Das Element befindet sich im Status des ersten Keyframes.

Animationsfüllmodus: beide; - Vor Beginn der Animation befindet sich das Element im Zustand des ersten Keyframes, nach Abschluss im Zustand des letzten.

Animation starten und stoppen:

Dies liegt in der Verantwortung der Eigenschaft „animation-play-state“, die zwei Werte annehmen kann: „Running“ oder „Pause“.

Element-Selektor:hover (animation-play-state: pausiert;)

Animationsrichtung:

Die Eigenschaft „animation-direction“ gibt an, wie die Richtung gesteuert wird, in der die Animation abgespielt wird. Hier sind die möglichen Werte:

Animationsrichtung: normal; - Animation wird in direkter Reihenfolge abgespielt;

Animationsrichtung: umgekehrt; - Die Animation wird in umgekehrter Reihenfolge abgespielt, von bis zu;

Animationsrichtung: alternativ;- Gerade Animationswiederholungen werden in umgekehrter Reihenfolge abgespielt, ungerade - in Vorwärtsreihenfolge;

Animationsrichtung: abwechselnd-umgekehrt; - Ungerade Animationswiederholungen werden in umgekehrter Reihenfolge abgespielt, gerade - in Vorwärtsreihenfolge.

Funktion zur reibungslosen Ausgabe animierter Frames:

Mit der Eigenschaft „animation-timing-function“ können Sie eine spezielle Funktion festlegen, die für die Wiedergabegeschwindigkeit der Animation verantwortlich ist. Standardmäßig beginnt die Animation langsam, beschleunigt sich schnell und wird am Ende langsamer. Wir haben derzeit die folgenden vordefinierten Werte: linear, leichtgängig, leichtgängig, leichtgängig, leichtgängig, einfach-in-aus, Stufenanfang, Stufenende.

Sie können solche Funktionen jedoch selbst erstellen. Bedeutung Animations-Timing-Funktion: Kubikbezier (P1x, P1y, P2x, P2y); Nimmt 4 Argumente als Eingabe und erstellt eine Verteilungskurve für den Animationsprozess.

Sie können die Erstellung dieser Funktionen auf der Website genauer studieren oder ausprobieren http://cubic-bezier.com

Abschließend kann die Animation mit der Funktion „steps“ in eine Menge einzelner Werte (Schritte) zerlegt werden, wobei als Eingabe die Anzahl der Schritte und die Richtung (Start oder Ende) verwendet werden. Im folgenden Beispiel besteht die Animation aus 5 Schritten, von denen der letzte direkt vor dem Ende der Animation stattfindet:

Elementselektor (Animationsname: Animationsname-1; Animationsdauer: 3 Sekunden; Animationsverzögerung: 5 Sekunden; Anzahl der Animationsiterationen: 3; Animations-Timing-Funktion: Schritte (5, Ende);)

Browserunterstützung für Animationen:

Die Werte in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Werte mit -webkit-, -moz- oder -O- geben die erste Version an, die mit dem Präfix funktionierte.

Auf der Website https://www.w3schools.com Sie können CSS-Animationen detaillierter studieren (mit Beispielen).
Eine der beliebtesten Bibliotheken für die Arbeit mit Animationen ist animieren.css.

Es scheint, dass die Schwierigkeiten, auf die Sie bei der Arbeit mit CSS-Animationen stoßen, nicht gerechtfertigt sind. Aber das ist absolut nicht wahr.

Erstens ist CSS ein leistungsstarkes Tool zur Verbesserung der Benutzererfahrung einer Benutzeroberfläche. Die Benutzerproduktivität wird dadurch nicht wesentlich beeinträchtigt. Im Gegensatz zu JavaScript-Analoga. Durch die Nutzung der Rechenleistung der GPU ermöglicht die Technologie Browsern, die Geschwindigkeit beim Rendern von Elementen schnell zu optimieren.

Zweitens Flexibilität, Geschwindigkeit und Einfachheit CSS-Implementierung Animationen werden dazu beitragen, bestehenden oder neuen Schnittstellen „Leben einzuhauchen“. Nachdem Sie allgemeine und originelle Ansätze entwickelt und die Besonderheiten der Technologie verstanden haben, können Sie für fast alle Projekte einzigartige Usability-Schnittstellen erstellen.

Ich hoffe, Sie haben den Artikel gefunden nützliche Informationen für sich. Schöne Seiten an alle. Vergessen Sie nicht die Animationen :)

CSS3-Animation Verleiht Websites Dynamik. Es erweckt Webseiten zum Leben und verbessert das Benutzererlebnis. Im Gegensatz zu CSS3-Übergängen basiert die Animationserstellung auf Keyframes, die es Ihnen ermöglichen, Effekte für eine bestimmte Zeit automatisch abzuspielen und zu wiederholen sowie die Animation innerhalb einer Schleife zu stoppen.

CSS3-Animationen können für fast alle HTML-Elemente sowie die Pseudoelemente:before und:after verwendet werden. Die Liste der animierten Eigenschaften ist auf der Seite angegeben. Vergessen Sie beim Erstellen von Animationen nicht mögliche Probleme mit der Leistung, da die Änderung einiger Eigenschaften viele Ressourcen erfordert.

Einführung in die CSS-Animation

Browserunterstützung

IE: 10.0
Feuerfuchs: 16,0, 5,0 -moz-
Chrom: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Oper: 12.1, 12.0 -o-
iOS-Safari: 9, 7.1 -webkit-
Opera Mini: —
Android-Browser: 44, 4.1 -webkit-
Chrome für Android: 44

1. Schlüsselbilder

Keyframes werden verwendet, um Animationseigenschaftswerte an verschiedenen Punkten in der Animation anzugeben. Keyframes definieren das Verhalten eines Animationszyklus; Die Animation kann null oder mehrmals wiederholt werden.

Keyframes werden mithilfe der @keyframes-Regel angegeben, die wie folgt definiert ist:

Name der @keyframes-Animation (Regelliste)

Die Animationserstellung beginnt mit der Installation Schlüsselbilder@keyframes-Regeln. Frames bestimmen, welche Eigenschaften in welchem ​​Schritt animiert werden. Jeder Frame kann einen oder mehrere Deklarationsblöcke mit einem oder mehreren Eigenschafts- und Wertpaaren enthalten. Die @keyframes-Regel enthält den Namen der Animation des Elements, der die Regel und den Deklarationsblock des Elements verknüpft.

@keyframes Schatten ( von (text-shadow: 0 0 3px black;) 50 % (text-shadow: 0 0 30px black;) bis (text-shadow: 0 0 3px black;) )

Keyframes werden mit erstellt Schlüsselwörter von und bis (entspricht den Werten 0 % und 100 %) oder anhand beliebig vieler Prozentpunkte. Sie können auch Schlüsselwörter und Prozentpunkte kombinieren. Wenn Frames die gleichen Eigenschaften und Werte haben, können sie in einer Deklaration zusammengefasst werden:

@keyframes verschieben ( von, nach ( oben: 0; links: 0; ) 25 %, 75 % (oben: 100 %;) 50 % (oben: 50 %;) )

Wenn keine 0 %- oder 100 %-Frames angegeben sind, erstellt der Browser des Benutzers diese mithilfe der berechneten (ursprünglich festgelegten) Werte der animierten Eigenschaft.

Wenn mehrere @keyframes-Regeln mit demselben Namen definiert sind, wird die letzte in der Dokumentreihenfolge ausgelöst und alle vorherigen werden ignoriert.

Sobald die @keyframes-Regel deklariert ist, können wir sie in der Animationseigenschaft referenzieren:

H1 (Schriftgröße: 3,5 em; Farbe: Dunkelmagenta; Animation: Schatten 2s unendliches Easy-In-Out; )

Es wird nicht empfohlen, nicht numerische Werte zu animieren (mit seltenen Ausnahmen), da das Ergebnis im Browser unvorhersehbar sein kann. Sie sollten auch keine Keyframes für Eigenschaftswerte erstellen, die keinen Mittelpunkt haben, wie z. B. die Eigenschaftswerte color: pink und color: #ffffff , width: auto und width: 100px oder border-radius: 0 und border- Radius: 50 % (in diesem Fall wäre es richtig, den Randradius anzugeben: 0 %).

1.1. Timing-Funktion für Schlüsselbilder

Eine Keyframe-Stilregel kann auch eine temporäre Funktion deklarieren, die verwendet werden soll, wenn die Animation zum nächsten Keyframe wechselt.

Beispiel

@keyframes bounce ( from ( top: 100px; Animation-Timing-Function: Easy-Out; ) 25 % ( Top: 50 Pixel; Animation-Timing-Function: Easy-In; ) 50 % ( Top: 100 Pixel; Animation-Timing- Funktion: Ease-Out;) 75 % (oben: 75 Pixel; Animation-Timing-Funktion: Ease-In;) bis (Oben: 100 Pixel;))

Für die Animation mit dem Namen „bounce“ werden fünf Keyframes angegeben. Zwischen dem ersten und zweiten Keyframe (also zwischen 0 % und 25 %) kommt die Easing-Funktion zum Einsatz. Zwischen dem zweiten und dritten Keyframe (also zwischen 25 % und 50 %) kommt die Funktion „Smooth Acceleration“ zum Einsatz. Usw. Das Element bewegt sich auf der Seite um 50 Pixel nach oben, verlangsamt sich, wenn es seinen höchsten Punkt erreicht, und beschleunigt sich dann, wenn es auf 100 Pixel sinkt. Die zweite Hälfte der Animation verhält sich ähnlich, verschiebt das Element jedoch nur um 25 Pixel nach oben auf der Seite.

Die im to- oder 100 %-Keyframe angegebene Timing-Funktion wird ignoriert.

2. Animationsname: Animationsname-Eigenschaft

Die Eigenschaft „animationsname“ gibt die Liste der auf das Element angewendeten Animationen an. Jeder Name wird verwendet, um einen Keyframe in einer Regel auszuwählen, die Eigenschaftswerte für die Animation bereitstellt. Wenn der Name mit keinem Keyframe in der Regel übereinstimmt, keine Eigenschaften zum Animieren vorhanden sind oder kein Animationsname vorhanden ist, wird die Animation nicht ausgeführt.

Wenn mehrere Animationen versuchen, dieselbe Eigenschaft zu ändern, wird die Animation ausgeführt, die am nächsten am Ende der Namensliste liegt.

Beim Animationsnamen wird die Groß-/Kleinschreibung beachtet und das Schlüsselwort „none“ ist nicht zulässig. Es wird empfohlen, einen Namen zu verwenden, der das Wesentliche der Animation widerspiegelt, und Sie können ein oder mehrere Wörter verwenden, die mit einem Bindestrich oder dem Unterstrichzeichen _ aufgeführt sind.

Die Immobilie wird nicht vererbt.

Syntax

Animationsname: keiner; Animationsname: test-01; Animationsname: -sliding; Animationsname: vertikal bewegen; Animationsname: test2; Animationsname: test3, move4; Animationsname: initial; Animationsname: erben;

3. Animationsdauer: Animationsdauer-Eigenschaft

Die Eigenschaft „animation-duration“ gibt die Dauer eines Animationszyklus an. Angabe in Sekunden s oder Millisekunden ms. Wenn für ein Element mehr als eine Animation angegeben ist, können Sie für jede eine andere Zeit festlegen, indem Sie die Werte durch Kommas getrennt auflisten.

Die Immobilie wird nicht vererbt.

Syntax

Animationsdauer: .5s; Animationsdauer: 200 ms; Animationsdauer: 2s, 10s; Animationsdauer: 15s, 30s, 200ms;

4. Timing-Funktion: Eigenschaft der Animation-Timing-Funktion

Die Eigenschaft „animation-timing-function“ beschreibt, wie die Animation zwischen den einzelnen Keyframe-Paaren fortschreitet. Während der Animationsverzögerung werden keine Timing-Funktionen angewendet.

Die Immobilie wird nicht vererbt.

Syntax

Animation-Timing-Funktion: Leichtigkeit; Animation-Timing-Funktion: Easy-In; Animation-Timing-Funktion: Ease-Out; Animation-Timing-Funktion: Easy-in-out; Animation-Timing-Funktion: linear; Animations-Timing-Funktion: Schrittstart; Animation-Timing-Funktion: Schrittende; Animations-Timing-Funktion: kubischer Bezier (0,1, 0,7, 1,0, 0,1); Animation-Timing-Funktion: Schritte (4, Ende); Animation-Timing-Funktion: Leichtigkeit, Schrittstart, Kubikbezier (0,1, 0,7, 1,0, 0,1); Animation-Timing-Funktion: initial; Animation-Timing-Funktion: erben;

Durch Schritt-für-Schritt-Animationen können interessante Effekte erzeugt werden, etwa das Drucken von Text oder eine Ladeanzeige.

5. Animationswiederholung: Eigenschaft „animation-iteration-count“.

Die Eigenschaft „animation-iteration-count“ gibt an, wie oft die Animationsschleife abgespielt wird. Ein Startwert von 1 bedeutet, dass die Animation einmal von Anfang bis Ende abgespielt wird. Diese Eigenschaft wird häufig in Verbindung mit dem alternativen Wert der Eigenschaft „animation-direction“ verwendet, wodurch die Animation in abwechselnden Schleifen in umgekehrter Reihenfolge abgespielt wird.

Die Immobilie wird nicht vererbt.

Syntax

Anzahl der Animationsiterationen: unendlich; Anzahl der Animationsiterationen: 3; Anzahl der Animationsiterationen: 2,5; Animationiterationsanzahl: 2, 0, unendlich;

6. Animationsrichtung: Animationsrichtungseigenschaft

Die Eigenschaft „animation-direction“ bestimmt, ob die Animation in einigen oder allen Schleifen in umgekehrter Reihenfolge abgespielt werden soll. Wenn die Animation in umgekehrter Reihenfolge abgespielt wird, sind auch die Timing-Funktionen umgekehrt. Beispielsweise verhält sich die Funktion „Ease-In“ wie die Funktion „Ease-Out“, wenn sie in umgekehrter Reihenfolge abgespielt wird.

Die Immobilie wird nicht vererbt.

Um festzustellen, ob die Wiederholung einer Animationsschleife gerade oder ungerade ist, beginnt die Anzahl der Wiederholungen bei 1.

Syntax

Animationsrichtung: normal; Animationsrichtung: umgekehrt; Animationsrichtung: alternativ; Animationsrichtung: abwechselnd-umgekehrt; Animationsrichtung: normal, umgekehrt; Animationsrichtung: alternativ, umgekehrt, normal; Animationsrichtung: initial; Animationsrichtung: erben;

7. Animation abspielen: Eigenschaft „animation-play-state“.

Die Eigenschaft „animation-play-state“ bestimmt, ob die Animation startet oder pausiert. Das Stoppen der Animation innerhalb einer Schleife ist durch die Verwendung dieser Eigenschaft in einem JavaScript-Skript möglich. Sie können die Animation auch stoppen, wenn Sie mit der Maus über ein Objekt fahren – state:hover .

Die Immobilie wird nicht vererbt.

Syntax

Animation-Play-State: läuft; Animationswiedergabestatus: angehalten; Animationswiedergabestatus: angehalten, läuft, läuft; Animations-Wiedergabezustand: initial; Animation-Play-State: erben;

8. Animationsverzögerung: Animationsverzögerungseigenschaft

Die Eigenschaft „animation-delay“ bestimmt, wann die Animation startet. Angabe in Sekunden s oder Millisekunden ms.

Die Immobilie wird nicht vererbt.

Syntax

Animationsverzögerung: 5s; Animationsverzögerung: 3s, 10ms;

9. Zustand des Elements vor und nach dem Abspielen der Animation: Eigenschaft „animation-fill-mode“.

Die Eigenschaft „animation-fill-mode“ bestimmt, welche Werte von der Animation außerhalb ihrer Ausführungszeit angewendet werden. Wenn die Animation abgeschlossen ist, kehrt das Element zu seinen ursprünglichen Stilen zurück. Standardmäßig wirkt sich die Animation nicht auf die Eigenschaftswerte aus, wenn die Animation auf ein Element angewendet wird – Animationsname und Animationsverzögerung. Darüber hinaus haben Animationen standardmäßig keinen Einfluss auf die Werte der Eigenschaften „animation-duration“ und „animation-iteration-count“, nachdem sie abgeschlossen sind. Die Eigenschaft „animation-fill-mode“ kann dieses Verhalten überschreiben.

Die Immobilie wird nicht vererbt.

Syntax

Animationsfüllmodus: keiner; Animationsfüllmodus: vorwärts; Animationsfüllmodus: rückwärts; Animationsfüllmodus: beide; Animationsfüllmodus: keiner, rückwärts; Animationsfüllmodus: beide, vorwärts, keine;

10. Kurze Beschreibung der Animation: Animationseigenschaft

Alle Parameter für die Animationswiedergabe können in einer Eigenschaft zusammengefasst werden – Animation – und durch ein Leerzeichen getrennt aufgelistet werden:
Animation: Animationsname Animationsdauer Animations-Timing-Funktion Animationsverzögerung Animationsiterationsanzahl Animationsrichtung;

Um die Animation abzuspielen, reicht es aus, nur zwei Eigenschaften anzugeben – Animationsname und Animationsdauer. Die übrigen Eigenschaften übernehmen ihre Standardwerte. Die Reihenfolge, in der die Eigenschaften aufgelistet sind, spielt keine Rolle, das Einzige ist, dass die Ausführungszeit von „animation-duration“ vor der Verzögerung von „animation-delay“ liegen muss.

11. Mehrere Animationen

Für ein Element können Sie mehrere Animationen festlegen und deren Namen durch Kommas getrennt auflisten:

Div (Animation: Schatten 1 Sek. Easy-In-Out 0,5 Sek. abwechselnd, Bewegung 5 Sek. linear 2 Sek.;)

Sie können die Dauer, Wiederholung, Richtung, Bewegungsart und Schritte der Animation steuern. Sie können beliebige Elemente animieren, auch Pseudoelemente.

Voraussetzung ist das Vorhandensein bestimmter Werte. Auf „Auto“ eingestellte Eigenschaften werden nicht animiert.

Safari unterstützt derzeit keine Pseudoelementanimationen. Bitte verwenden Sie andere Browser, um den Eintrag anzuzeigen.

Beispiel für eine CSS-Animation:

Beispielanimationscode:

@keyframes move ( 40 % ( links: 50 %; unten: 75 %; Animation-Timing-Funktion: Easy-In; ) 80 % ( links: 90 %; unten: -10em; ) )

Verbindungsanimation:

Sonne (Animation: 15s unendlich linear bewegen;)

bewegen – Animationsname 15s – Dauer unendlich – endlose Wiederholung linear – Bewegungstyp

@keyframes

Die Animation selbst wird im @keyframes-Block festgelegt. Nach @keyframes wird der Name der Animation gesetzt und dann hinein Geschweifte Klammern- ihre Schritte.

Schritte können mithilfe von Prozentsätzen oder mithilfe der Schlüsselwörter „from“ und „to“ angegeben werden. In diesem Fall können Sie die Art der Animation schrittweise ändern (Animation-Timing-Funktion):

Animationsname

Wird verwendet, um den Namen der Animation festzulegen.

Mögliche Werte: ein oder mehrere Animationsnamen. Standardwert: keiner.

Animationsname: move; - eine Animation. Animationsname: Bewegung, Sonnenfarbe; - zwei Animationen, Namen durch Kommas getrennt.

Animationsdauer

Die Dauer der Animation wird durch die Eigenschaft „animation-duration“ gesteuert.

Mögliche Werte: Zeit in Sekunden (s) oder Millisekunden (ms). Bei mehreren Animationen kann die Zeit für jede einzelne durch Komma getrennt angegeben werden. Der Anfangswert ist 0s.

Animation-Timing-Funktion

Die Eigenschaft definiert den Animationstyp.

Mögliche Werte:

Reibungslose Animation Ease – Gleiten (Standardwert) linear – sanfte Bewegung Ease-in – Beschleunigung zum Ende hin Ease-out – Beschleunigung am Anfang Ease-in-out – sanfteres Gleiten als Ease

Mit „Cubic-Bezier(Zahl, Zahl, Zahl, Zahl)“ können Sie einen komplexen Animationstyp angeben. Die Auswahl der Werte erfolgt bequem bei kubisch-bezier.com.

kubisch-bezier(.24,1.49,.29,-0.48);

Schritt-für-Schritt-Animation Schrittanfang und Schrittende – ermöglichen Ihnen die Einstellung einer Schritt-für-Schritt-Animation. Stellen Sie sicher, dass Sie bestimmte Schritte festlegen. In diesem Fall erfolgen Änderungen beim Schrittstart am Anfang des Schritts und beim Schrittende am Ende.

Stufenende Wenn Sie „step-start“ festlegen, beginnt der Zähler bei Einsen.

Schritte (Anzahl) – ermöglicht es Ihnen, die Anzahl der Schritte festzulegen, in denen die Animation ausgeführt wird, während Sie nur den letzten Schritt festlegen können, ohne Zwischenschritte angeben zu müssen.

Anzahl der Animationsiterationen

Steuert die Wiederholung der Animation. Standardwert: 1 (Animation wird einmal abgespielt).

Mögliche Werte:

Zahl – wie oft die Animation abgespielt werden soll. unendlich – endlose Wiederholung.

Animationsregie

Verantwortlich für die Regie der Animation.

Mögliche Werte:

normal – die Animation wird in der normalen Richtung abgespielt, vom Anfang bis zum Ende. umgekehrt – die Animation wird in die entgegengesetzte Richtung abgespielt, also vom Ende. Abwechselnd – die Animation wird von Anfang bis Ende und dann in die entgegengesetzte Richtung abgespielt. Alternate-Reverse – die Animation wird vom Ende zum Anfang und dann in die entgegengesetzte Richtung abgespielt.

Animations-Wiedergabestatus

Steuert das Stoppen und Abspielen der Animation.

Mögliche Werte: läuft – Animation wird abgespielt (Standardwert). pausiert – die Animation friert beim ersten Schritt ein.

Es ist nicht möglich, den Schritt zu steuern, bei dem der Stopp erfolgen soll, aber Sie können die Animation stoppen, indem Sie mit der Maus darüber fahren:

Animationsverzögerung

Mit der Animationsverzögerung können Sie eine Verzögerung für die Animation festlegen, bevor sie abgespielt wird.

Mögliche Werte: Zeit in Sekunden (s) oder Millisekunden (ms). Werte können negativ sein. Bei mehreren Animationen kann die Zeit für jede einzelne durch Komma getrennt angegeben werden. Der Anfangswert ist 0s.

Animationsfüllmodus

Die Eigenschaft bestimmt, ob die Animation das Element außerhalb der Wiedergabezeit der Animation beeinflusst.

Mögliche Werte:

keine – die Animation wirkt sich nur während der Wiedergabe auf das Element aus; nach Abschluss kehrt das Element in seinen ursprünglichen Zustand zurück. vorwärts – die Animation wirkt sich auf das Element aus, nachdem die Wiedergabe beendet ist. rückwärts – die Animation wirkt sich auf das Element aus, bevor die Wiedergabe beginnt. Both – Die Animation wirkt sich sowohl vor als auch nach dem Ende der Wiedergabe auf das Element aus.

Um zu sehen, wie rückwärts und beides funktionieren, bevor die Animation abgespielt wird, stellen Sie „animation-delay“ ein: 3s; . Sinnvoll ist es auch, das Beispiel in einem neuen Fenster zu öffnen.

Alle diese Eigenschaften können mit geschrieben werden kurze Anmerkung, Zum Beispiel:

Animation: Timing 5s unendlich abwechselnd;

Erforderliche Werte sind der Animationsname und die Dauer. Der erste Zeitwert gilt als Wiedergabedauer, der zweite als Verzögerung.