Animations-CSS-Beispiele und vorgefertigter Code. Neun einfache CSS3-Animationsbeispiele. Animiertes Londoner Rad aus zwei Elementen

Letzte Aktualisierung: 06.11.2016

Animation bietet großartige Möglichkeiten, den Stil eines Elements zu ändern. Bei einem Übergang haben wir eine Reihe von Eigenschaften mit Anfangswerten, die das Element vor Beginn des Übergangs hat, und Endwerten, die nach Abschluss des Übergangs festgelegt werden. Während der Animation können wir nicht nur zwei Wertesätze haben – Anfangs- und Endwerte, sondern auch viele Zwischenwertsätze.

Animation basiert auf einem sequentiellen Wechsel von Schlüsselbildern. Jeder Keyframe definiert einen Wertesatz für die zu animierenden Eigenschaften. Und die sequentielle Änderung solcher Schlüsselbilder wird tatsächlich die Animation darstellen.

Im Wesentlichen verwenden Übergänge dasselbe Modell – zwei Schlüsselbilder werden ebenfalls implizit definiert – ein Start- und ein End-Schlüsselbild, und der Übergang selbst stellt den Übergang vom Start- zum End-Schlüsselbild dar. Der einzige Unterschied zur Animation besteht in diesem Fall darin, dass Sie viele Zwischenschlüsselbilder für die Animation definieren können.

Im Allgemeinen hat eine Keyframe-Deklaration in CSS3 die folgende Form:

@keyframes Animationsname ( von ( /* anfängliche CSS-Eigenschaftswerte */ ) bis ( /* endgültige CSS-Eigenschaftswerte */ ) )

Nach dem Schlüsselwort @keyframes folgt der Name der Animation. Anschließend werden mindestens zwei Schlüsselbilder in geschweiften Klammern definiert. Der Block nach dem Schlüsselwort „from“ deklariert den Startschlüsselrahmen, und nach dem Schlüsselwort „to“ im Block wird der Endschlüsselrahmen definiert. Innerhalb jedes Keyframes werden eine oder mehrere CSS-Eigenschaften definiert, ähnlich wie bei der Erstellung eines regulären Stils.

Definieren wir beispielsweise eine Animation für die Hintergrundfarbe eines Elements:

In diesem Fall heißt die Animation „backgroundColorAnimation“. Die Animation kann einen beliebigen Namen haben.

Diese Animation bietet einen Übergang von einer roten Hintergrundfarbe zu einer blauen Hintergrundfarbe. Darüber hinaus wird nach Abschluss der Animation die für das div-Element definierte Farbe festgelegt.

Um einem Element eine Animation hinzuzufügen, verwenden Sie die Eigenschaft „animation-name“ in seinem Stil. Der Wert dieser Eigenschaft ist der Name der anzuwendenden Animation.

Mithilfe der Eigenschaft „animation-duration“ müssen Sie außerdem die Animationszeit in Sekunden oder Millisekunden festlegen. In diesem Fall beträgt die Animationszeit 2 Sekunden.

Bei dieser Definition startet die Animation sofort nach dem Laden der Seite. Sie können jedoch auch eine Animation basierend auf einer Benutzeraktion auslösen. Durch die Definition eines Stils für die Pseudoklasse :hover können Sie beispielsweise festlegen, dass eine Animation startet, wenn der Mauszeiger über einem Element schwebt:

@keyframes backgroundColorAnimation ( von ( Hintergrundfarbe: rot; ) bis ( Hintergrundfarbe: blau; ) ) div( Breite: 100 Pixel; Höhe: 100 Pixel; Rand: 40 Pixel 30 Pixel; Rand: 1 Pixel durchgehend #333; Hintergrundfarbe: # ccc; ) div:hover( Animationsname: backgroundColorAnimation; Animationsdauer: 2s; )

Viele Schlüsselbilder

Wie oben erwähnt, können Sie mit der Animation zusätzlich zu zwei Standard-Keyframes viele Zwischenframes verwenden. Um den Tween-Frame zu bestimmen, wird der Prozentsatz der Animation angewendet, in dem der Tween-Frame verwendet werden soll:

@keyframes backgroundColorAnimation ( von ( Hintergrundfarbe: rot; ) 25 %( Hintergrundfarbe: gelb; ) 50 %( Hintergrundfarbe: grün; ) 75 %( Hintergrundfarbe: blau; ) bis ( Hintergrundfarbe: violett ; ) )

In diesem Fall beginnt die Animation mit der Farbe Rot. Nach 25 % der Animationszeit wechselt die Farbe zu Gelb, nach weiteren 25 % zu Grün und so weiter.

Sie können auch mehrere Eigenschaften gleichzeitig in einem Schlüsselbild animieren:

@keyframes backgroundColorAnimation ( von ( Hintergrundfarbe: Rot; Deckkraft: 0,2; ) bis ( Hintergrundfarbe: Blau; Deckkraft: 0,9; ) )

Sie können auch mehrere separate Animationen definieren, diese aber gemeinsam anwenden:

@keyframes backgroundColorAnimation ( from ( background-color: red; ) to ( background-color: blue; ) ) @keyframes opacityAnimation ( from ( opacity: 0.2; ) to ( opacity: 0.9; ) ) div( width: 100px; height: 100px; Rand: 40px 30px; Rand: 1px durchgehend #333; Hintergrundfarbe: #ccc; Animationsname: backgroundColorAnimation, opacityAnimation; Animationsdauer: 2s, 3s; )

Der Eigenschaftswert „animation-name“ listet durch Kommas getrennte Animationen auf, und die Eigenschaft „animation-duration“ legt auch die durch Kommas getrennte Zeit dieser Animationen fest. Der Name der Animation und ihre Zeit stimmen mit der Position überein, d. h. die opacityAnimation dauert 3 Sekunden.

Abschluss der Animation

Im Allgemeinen endet die Animation, sobald das durch die Eigenschaft „animation-duration“ angegebene Zeitintervall abgelaufen ist. Mit zusätzlichen Eigenschaften können wir dieses Verhalten jedoch außer Kraft setzen.

Somit bestimmt die Eigenschaft „animation-iteration-count“, wie oft die Animation wiederholt wird. Zum Beispiel 3 Wiederholungen der Animation hintereinander:

Anzahl der Animationsiterationen: 3;

Wenn Sie möchten, dass die Animation unendlich oft ausgeführt wird, wird diese Eigenschaft auf unendlich gesetzt:

Anzahl der Animationsiterationen: unendlich;

Bei Wiederholung beginnt die Animation erneut mit dem Start-Keyframe. Aber mit der Eigenschaft „animation-direction: alternative;“. die entgegengesetzte Richtung der Animation beim Wiederholen. Das heißt, es beginnt mit dem End-Keyframe und geht dann zum Start-Frame über:

Animationsname: backgroundColorAnimation, opacityAnimation; Animationsdauer: 2s, 2s; Anzahl der Animationsiterationen: 3; Animationsrichtung: alternativ;

Wenn die Animation endet, stellt der Browser das animierte Element auf den Stil ein, den es vor der Anwendung der Animation hatte. Aber die Eigenschaft „animation-fill-mode: Forwards“ ermöglicht es Ihnen, den Endwert der animierten Eigenschaft genau auf den Wert zu setzen, der im letzten Frame war:

Animationsname: backgroundColorAnimation; Animationsdauer: 2s; Anzahl der Animationsiterationen: 3; Animationsrichtung: alternativ; Animationsfüllmodus: vorwärts;

Animationsverzögerung

Mit der Eigenschaft „animation-delay“ können Sie die Animationsverzögerungszeit definieren:

Animationsname: backgroundColorAnimation; Animationsdauer: 5s; Animationsverzögerung: 1s; /* 1 Sekunde verzögern */

Reibungslose Animationsfunktion

Wie bei Übergängen können Sie auch bei Animationen die gleichen Glättungsfunktionen anwenden:

linear: lineare Glättungsfunktion, Eigenschaft ändert sich gleichmäßig über die Zeit

Ease: Eine Ease-Funktion, bei der die Animation zur Mitte hin schneller und zum Ende hin langsamer wird, was für eine natürlichere Variation sorgt

Easy-In: Eine Easy-In-Funktion, die nur am Anfang beschleunigt

Ease-Out: eine Ease-Out-Funktion, die nur beim Start beschleunigt

Easy-In-Out: Eine Easy-In-Funktion, bei der die Animation zur Mitte hin schneller und zum Ende hin langsamer wird, was für eine natürlichere Variation sorgt

kubischer Bezier: Die kubische Bezier-Funktion wird für Animationen verwendet

Um die Glättungsfunktion festzulegen, verwenden Sie die Eigenschaft „animation-timing-function“:

@keyframes backgroundColorAnimation ( von ( Hintergrundfarbe: rot; ) bis ( Hintergrundfarbe: blau; ) ) div( Breite: 100 Pixel; Höhe: 100 Pixel; Rand: 40 Pixel 30 Pixel; Rand: 1 Pixel durchgehend #333; Animationsname: HintergrundColorAnimation ; Animationsdauer: 3s; Animations-Timing-Funktion: Easy-in-out; )

Animationseigenschaft

Die Animationseigenschaft ist eine Kurzform zur Definition der oben besprochenen Eigenschaften:

Animation: Animationsname, Animationsdauer, Animations-Timing-Funktion, Animationsiterationsanzahl, Animationsrichtung, Animationsverzögerung, Animationsfüllmodus

Erforderlich sind die ersten beiden Parameter, die den Namen und die Uhrzeit der Animation angeben. Die restlichen Werte sind optional.

Nehmen wir den folgenden Satz von Eigenschaften:

Animationsname: backgroundColorAnimation; Animationsdauer: 5s; Animation-Timing-Funktion: Easy-in-out; Anzahl der Animationsiterationen: 3; Animationsrichtung: alternativ; Animationsverzögerung: 1s; Animationsfüllmodus: vorwärts;

Dieser Satz entspricht der folgenden Animationsdefinition:

Animation: backgroundColorAnimation 5 Sek. Easy-In-Out 3 abwechselnd 1 Sek. vorwärts;

Erstellen eines Banners mit Animation

Als Beispiel für eine Animation erstellen wir ein einfaches animiertes Banner:

Hier laufen drei Animationen gleichzeitig. Die „Banner“-Animation ändert die Hintergrundfarbe des Banners und die Text1- und Text2-Animationen zeigen und verbergen Text mithilfe der Transparenzeinstellungen. Wenn der erste Text sichtbar ist, ist der zweite nicht sichtbar und umgekehrt. Dadurch erhalten wir eine Animation des Textes im Banner.

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 Leistungsprobleme, 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 den Schlüsselwörtern from und to (entspricht den Werten 0 % und 100 %) oder mit Prozentpunkten erstellt, von denen beliebig viele angegeben werden können. 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 lassen sich interessante Effekte erzeugen, 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.;)

| 18.02.2016

CSS3 eröffnet UI-Designern unbegrenzte Möglichkeiten und der Hauptvorteil besteht darin, dass fast jede Idee einfach implementiert und zum Leben erweckt werden kann, ohne auf die Verwendung von JavaScript zurückgreifen zu müssen.

Es ist erstaunlich, wie einfache Dinge eine gewöhnliche Webseite beleben und sie für Benutzer zugänglicher machen können. Die Rede ist von CSS3-Übergängen, mit denen Sie einem Element ermöglichen können, sich beispielsweise beim Hover zu transformieren und seinen Stil zu ändern. Die neun unten verfügbaren CSS3-Animationsbeispiele helfen Ihnen dabei, ein responsives Erscheinungsbild auf Ihrer Website zu schaffen und das Gesamtbild der Seite durch schöne, sanfte Übergänge zu verbessern.

Für detailliertere Informationen können Sie das Archiv mit Dateien herunterladen.

Alle Effekte funktionieren mit der Übergangseigenschaft. Übergang- „transition“, „transformation“) und die Pseudoklasse:hover, die den Stil des Elements bestimmt, wenn der Mauszeiger darüber schwebt (in unserem Tutorial). Für unsere Beispiele haben wir ein 500 x 309 Pixel großes Div, eine anfängliche Hintergrundfarbe von #6d6d6d und eine Übergangsdauer von 0,3 Sekunden verwendet.

Körper > div ( Breite: 500 Pixel; Höhe: 309 Pixel; Hintergrund: #6d6d6d; -webkit-transition: alle 0,3 Sekunden Leichtigkeit;; -moz-Transition: alle 0,3 Sekunden Leichtigkeit;; -o-Transition: alle 0,3 Sekunden Leichtigkeit;; Übergang: alle 0,3 Sekunden erleichtern; )

1. Ändern Sie die Farbe beim Schweben

Früher war die Implementierung eines solchen Effekts eine ziemlich mühsame Arbeit mit mathematischen Berechnungen bestimmter RGB-Werte. Jetzt reicht es aus, einen CSS-Stil zu schreiben, in dem Sie dem Selektor eine Pseudoklasse hinzufügen und eine Hintergrundfarbe festlegen müssen, die die ursprüngliche Hintergrundfarbe reibungslos (in 0,3 Sekunden) ersetzt, wenn Sie mit der Maus über den Block fahren:

Farbe:hover (Hintergrund:#53ea93;)

2. Aussehen des Rahmens

Eine interessante und auffällige Transformation ist der innere Rahmen, der sanft erscheint, wenn Sie mit der Maus darüber fahren. Gut geeignet zum Verzieren verschiedener Knöpfe. Um diesen Effekt zu erzielen, verwenden wir die Eigenschaft pseudo-class:hover und box-shadow mit dem Parameter inset (setzt den Schatten innerhalb des Elements). Darüber hinaus müssen Sie die Schattendehnung (in unserem Fall 23 Pixel) und ihre Farbe festlegen:

Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )

3. Schaukeln

Eine Ausnahme stellt diese CSS-Animation dar, da die Eigenschaft „transition“ hier nicht verwendet wird. Stattdessen haben wir Folgendes verwendet:

• @keyframes ist eine grundlegende Anweisung zum Erstellen einer Frame-für-Frame-CSS-Animation, mit der Sie das sogenannte ausführen können. Storyboard und beschreiben Sie die Animation als eine Liste von Schlüsselpunkten;
• Animation und Animation-Iteration-Count – Eigenschaften zum Festlegen von Animationsparametern (Dauer und Geschwindigkeit) und der Anzahl der Zyklen (Wiederholungen). In unserem Fall wiederholen Sie 1.

4. Dämpfung

Der Fade-Effekt ist im Wesentlichen eine einfache Änderung der Transparenz eines Elements. Die Animation wird in zwei Schritten erstellt: Zuerst müssen Sie den anfänglichen Transparenzstatus auf 1 setzen, also vollständige Deckkraft, und dann den Wert angeben, wenn Sie mit der Maus darüber fahren – 0,6:

Fade (Deckkraft: 1;) .fade:hover (Deckkraft: 0,6;)

Für das gegenteilige Ergebnis tauschen Sie die Werte aus:

5. Vergrößerung

Um den Block zu vergrößern, wenn wir mit der Maus darüber fahren, verwenden wir die Transformationseigenschaft und setzen sie auf scale(1.2) . In diesem Fall vergrößert sich der Block unter Beibehaltung seiner Proportionen um 20 Prozent:

Grow:hover ( -webkit-transform: Scale(1.2); -ms-transform: Scale(1.2); transform: Scale(1.2); )

6. Reduzierung

Ein Element zu verkleinern ist genauso einfach wie es zu vergrößern. Wenn wir im fünften Punkt zum Erhöhen der Skala einen Wert größer als 1 angeben mussten, geben wir zum Verkleinern des Blocks einfach einen Wert an, der kleiner als eins ist, zum Beispiel scale(0.7) . Wenn Sie nun mit der Maus darüber fahren, wird der Block proportional um 30 Prozent seiner ursprünglichen Größe verkleinert:

Shrink:hover ( -webkit-transform: Scale(0.7); -ms-transform: Scale(0.7); transform: Scale(0.7); )

7. Transformation in einen Kreis

Eine der am häufigsten verwendeten Animationen ist ein rechteckiges Element, das sich in einen Kreis verwandelt, wenn man mit der Maus darüber fährt. Mit der CSS-Eigenschaft border-radius in Verbindung mit :hover und transition kann dies problemlos erreicht werden:

Circle:hover ( border-radius: 70 %; )

8. Drehung

Eine unterhaltsame Animationsoption besteht darin, ein Element um eine bestimmte Gradzahl zu drehen. Dazu benötigen wir erneut die Transformationseigenschaft, jedoch mit einem anderen Wert – rotateZ(20deg) . Mit diesen Parametern wird der Block relativ zur Z-Achse um 20 Grad im Uhrzeigersinn gedreht:

Drehen: schweben ( -webkit-transform: rotierenZ(20 Grad); -ms-transform: rotierenZ(20 Grad); transform: rotierenZ(20 Grad); )

9. 3D-Schatten

Die Meinungen der Designer darüber, ob dieser Effekt im Flat Design angemessen ist, gehen auseinander. Allerdings ist diese CSS3-Animation recht originell und wird auch auf Webseiten verwendet. Wir erzielen einen dreidimensionalen Effekt mithilfe der bereits bekannten Box-Shadow-Eigenschaften (erzeugen einen mehrschichtigen Schatten) und transformieren mit dem Parameter translatorX(-7px) (ermöglichen eine horizontale Verschiebung des Blocks um 7 Pixel nach links). ):

Threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: TranslateX( -7px); transformieren: translatorX(-7px); )

Browserunterstützung

Die folgenden Browser unterstützen derzeit die Übergangseigenschaft:

Die übrigen in diesen Beispielen verwendeten Eigenschaften wie transform , box-shadow usw. werden ebenfalls von fast allen modernen Browsern unterstützt. Wenn Sie diese Ideen jedoch für Ihre Projekte verwenden möchten, empfehlen wir Ihnen dringend, die Cross-Browser-Kompatibilität noch einmal zu überprüfen.

Wir hoffen, dass Sie diese CSS3-Animationsbeispiele hilfreich fanden. Wir wünschen Ihnen kreativen Erfolg!

Diese Sammlung enthält die besten und hochwertigsten CSS-Funktionen. Hier finden Sie verschiedene und erstaunliche Demobeispiele und -techniken berühmter Layouter und Designer, die versuchen zu beweisen, dass es mittlerweile möglich ist, fast alles nur mit reinem CSS zu machen. Hier finden Sie auch mehrere Lektionen, die Ihnen im Detail erklären, wie Sie eine solche Kreation herstellen. Ich hoffe, dass diese Sammlung für Sie nützlich sein wird.

CSS 3D-Wolken

In dieser Demo können Sie ausgefallene Wolken in 3D erstellen und bearbeiten. Diese CSS-Clouds machen uns deutlich, dass die Möglichkeiten von Web-Technologien nahezu grenzenlos sind.

Reine CSS-Logos

Dies sind Beispiele für Logos, die nur mit reinem CSS erstellt wurden. Denken Sie nur darüber nach, bei der Erstellung wurden keine Bilder verwendet. Es ist einfach etwas.

Alphabet mit CSS-Animation

Tolles und künstlerisches Beispiel für die Verwendung von CSS im Alphabet

3D-Navigation für die Website

Eine einfache, aber sehr elegante Navigationsleiste für die Website, natürlich nur mit CSS3 erstellt. Keine Bilder oder Skripte.

Google Doodle mit CSS

Eines der vielen Doodles der Google-Suchmaschine, erstellt in CSS. Dies ist ein großartiges Beispiel für den guten Einsatz von CSS-Animationen.

Schieberegler

Ein gut gemachter und hochwertiger Bild-Slider. Plus 4 Beispiele in der Demo.

Doppelter animierter Ring

Ein wunderschöner animierter und mehrfarbiger Ring mit wenig CSS-Code

Unschärfe in CSS

Meiner Meinung nach ist dieser Filter sehr notwendig, insbesondere da er mit reinem CSS erstellt wurde. Mithilfe von Unschärfe können Sie die Aufmerksamkeit des Benutzers auf einen bestimmten Punkt lenken.

Der vollständige Leitfaden zu Flexbox

In diesem Artikel geht es um responsive Flexbox-Blöcke. Es geht ausschließlich um diese Blöcke, obwohl der Artikel auf Englisch ist.

Buntes und animiertes Menü mit CSS3

Ein schönes Dropdown-Menü für eine Website mit Symbolen. Ein großes Plus ist, dass es vollständig in CSS erstellt wurde.

CSS-Filter

Hochwertiges Material in englischer Sprache, in dem es um die Verwendung von CSS-Filtern für Bilder geht.

CSS-Formulare

Ein Beitrag über CSS-Formulare mit zahlreichen Beispielen

Fortschrittsbalken in CSS

Eine Lektion zum Erstellen stilvoller Fortschrittsbalken mit reinem CSS und Animation. Sie können sich auch das Beispiel ansehen und die Quellen herunterladen.

Animation – Animate.css

Das derzeit beliebteste CSS-Animationsprojekt im Internet. Und wahrscheinlich die einfachste und hochwertigste und außerdem kostenlos.

). 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 Negative Werte sind verboten 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 eine einfache Animation erstellt, in der wir die CSS-Eigenschaft „top“ verwenden, um relativ positionierte Elemente relativ zum oberen Rand der aktuellen Position zu verschieben und dabei die Hintergrundfarbe des Elements zu ändern.