CSS3-Übergänge und -Animationen verwenden, um Änderungen an der Benutzeroberfläche hervorzuheben

Designer und Künstler haben eine lange Geschichte des Experimentierens mit Bewegung, Effekten und verschiedenen Arten von Illusionen mit dem Ziel, ihrer Arbeit eine zusätzliche Ebene hinzuzufügen. Die Op-Art-Bewegung setzte in den 1960er Jahren optische Illusionen ein, um den Eindruck von Bewegung zu vermitteln.

Seitdem sind neuere und neuere Ansätze aufgetaucht, wie die kürzlich populäre kinetische Kunst, die die Perspektive des Betrachters durch multidimensionale Bewegung erweitert. Motion erschien auch in der Informatik mit der Erfindung des ersten blinkenden Cursors im Jahr 1967.

In der Front-End-Entwicklung wurden DOM-Elemente vor der Veröffentlichung von CSS3 in der Regel von JavaScript animiert. Diese Methode funktioniert zwar immer noch, aber die Neue Eigenschaften, die mit CSS3 eingeführt wurden, ermöglichen es uns, unsere Designs zu verbessern mit verschiedenen effekten und bewegungen auf intuitive Weise.

Die zwei Haupttechniken, die CSS3 anbietet, sind Übergänge und Animationen. In diesem Beitrag werden wir uns ansehen, was sie sind, was der Unterschied zwischen ihnen ist und wie Sie sie nutzen können.

Übergänge

Übergänge und Animationen sind beide gewohnt visualisieren Sie Änderungen im Zustand eines HTML-Elements von Ändern einer oder mehrerer seiner CSS-Eigenschaften.

Die einfachste Form der Zustandsänderungsvisualisierung besteht darin, die Farbe einer Schaltfläche oder eines Links zu ändern, wenn sie mit der Maus in der Maus gehalten wird. Wenn dies geschieht, erhält das Element einen etwas anderen Stil, der normalerweise vom Betrachter bemerkt wird, als ob sich etwas auf dem Bildschirm bewegt hätte.

Das Ändern der CSS-Eigenschaften eines Links bei Schwebeflug (oder Fokus oder Klick) ist die älteste und einfachste Form von Übergängen. Sie gab es schon lange vor der CSS3-Ära.

 eine Farbe: Orange;  a: hover Farbe: Rot;  a: Fokus Farbe: Blau;  a: besuchte color: green; 

Übergänge werden verwendet, wenn ein HTML-Element von einem vordefinierten Zustand in einen anderen wechselt. Mit CSS3 wurden neue Eigenschaften eingeführt, die komplexere Visualisierungen als zuvor ermöglichen, z. B. Timing-Funktionen oder Dauersteuerung.

Im nächsten Abschnitt werden wir uns die neuen CSS-Eigenschaften ansehen, nachdem wir verstanden haben, wie sich Animationen unterscheiden. Lassen Sie uns zunächst die wichtigsten Dinge anzeigen, die Sie über Übergänge wissen müssen.

1. Sie haben immer einen Anfangs- und einen Endzustand.
2. Die Zustände zwischen Start- und Endpunkt werden implizit vom Browser definiert. Dies kann mit CSS nicht geändert werden.
3. Sie benötigen explizite Auslösung, z. B. das Hinzufügen einer neuen Pseudoklasse durch CSS oder einer neuen Klasse durch jQuery.

Unten sehen Sie ein schönes Beispiel für intelligent genutzte CSS3-Übergänge, in denen der Autor versteckte Informationen auf eine Art und Weise offenbart, die nicht aufdringlich ist, den Benutzer jedoch auf den neuen Inhalt lenkt.

Animationen

Wenn wir Zustandsänderungen mit komplizierteren Bewegungen visualisieren möchten oder keinen expliziten Auslöser haben, z. Wenn der Effekt beim Laden der Seite gestartet werden soll, sind Animationen der richtige Weg.

Animationen ermöglichen es, einen komplexeren Pfad zu definieren, indem Sie unseren eigenen Pfad festlegen und konfigurieren Keyframes. Keyframes sind Zwischenpunkte im Verlauf der Animation, die es uns ermöglichen, den Stil des animierten Elements beliebig oft zu ändern.

Obwohl CSS3 großartige Möglichkeiten bietet, anspruchsvolle Animationen zu erstellen, ist es normalerweise schwieriger, sie als Übergänge zu erstellen. Deshalb gibt es viele tolle Animationsbibliotheken, die unsere Arbeit erleichtern können.

Die wichtigsten Dinge, die Sie über CSS3-Animationen wissen müssen, sind:

1. Sie erfordern keine explizite Auslösung, sie können mit dem Laden der Seite beginnen oder wenn ein anderes DOM-Ereignis im Browser stattfindet
2. Sie können in Fällen verwendet werden, in denen Übergänge verwendet werden, z. B. wenn eine neue Klasse oder Pseudoklasse hinzugefügt oder entfernt wird (obwohl dies ein weniger häufiger Anwendungsfall ist).
3. Sie müssen einige Keyframes (Zwischenzustände) definieren.
4. Wir können die Anzahl, die Häufigkeit und den Stil dieser Keyframes angeben

Im folgenden Beispiel sehen Sie ein cooles animiertes Dropdown-Menü. Die Animation beginnt, wenn wir auf die Schaltfläche klicken. Dies wird durch Hinzufügen zusätzlicher Klassen zu den Listenelementen mit jQuery erreicht, wenn das Klickereignis auftritt.

Diese neuen Klassen werden mit angegeben animiert @keyframes Regeln in der CSS-Datei. Die zusätzlichen Klassen werden von jQuery entfernt, wenn der Benutzer das nächste Mal auf die Schaltfläche klickt, und das Menü wird wieder ausgeblendet.

CSS-Eigenschaften und die @keyframes Regel

Für Übergänge können wir entweder die verwenden Übergang Abkürzungseigenschaft oder 4 einzelne übergangsbezogene Eigenschaften: Übergangseigenschaft, Übergangszeit, Übergangszeitfunktion, und Übergangsverzögerung. Die Abkürzungseigenschaft enthält alle einzelnen Eigenschaften in abgekürzter Form.

Für Animationen gibt es die Animation Abkürzungseigenschaft in unseren Händen, die für nicht weniger als 8 einzelne Animationseigenschaften steht, nämlich Animationsname, Animationsdauer, Animations-Timing-Funktion, Animationsverzögerung, Animations-Iterationszählung, Animationsrichtung, Animation-Füllmodus, und Animationsspielzustand.

Das Wichtigste bei Übergängen und Animationen ist, dass wir immer dabei sind müssen die CSS-Eigenschaften angeben, die während der Statusänderung geändert werden. Bei Übergängen sieht es so aus:

 .Element Hintergrund: Orange; Übergangseigenschaft: Hintergrund; Übergangszeit: 3s; Übergangszeitfunktion: Einstieg;  .element: hover Hintergrund: rot; 

Wir haben die angegeben Hintergrund Eigenschaft, weil dies während des Übergangs geändert wird.

Wir können mehr als eine CSS-Eigenschaft in einem Übergang ändern. In diesem Fall würde der obige Code folgendermaßen geändert: Übergangseigenschaft: Hintergrund, Grenze;. Wir können auch die verwenden Übergangseigenschaft: alle;, wenn wir nicht jede Eigenschaft einzeln angeben möchten.

Wir können die Abkürzung wählen Übergang Eigentum auch. Wenn wir dies tun, müssen wir immer auf die richtige Reihenfolge der inneren Eigenschaften achten (siehe die Syntax in den Dokumenten)..

 .Element Hintergrund: Orange; Übergang: Hintergrund 3s Leichtigkeit;  .element: hover Hintergrund: rot; 

Wenn wir eine Animation erstellen möchten, müssen wir die zugehörige angeben Keyframes. Die CSS-Eigenschaften müssen separat definiert werden @keyframes Regeln Hier ist ein Beispiel, wie wir das machen können:

 .Element Position: relativ; Animationsname: Folie; Animationsdauer: 3s; Animations-Timing-Funktion: Leichtigkeit;  @keyframes slide 0% left: 0;  50% left: 200px;  100% left: 400px; 

Im obigen Beispiel haben wir einen sehr einfachen gleitenden Effekt erstellt. Wir haben die definiert Animationsname, binden Sie dann 3 Keyframes an, die wir im angegeben haben @keyframes slide … Regeln Die Prozentangaben beziehen sich auf die Dauer der Animation. 50% finden im Beispiel bei 1,5 Sekunden statt.

Wir könnten die Abkürzung verwenden Animation Eigenschaft auch, oder könnte die Keyframes mit der einfacheren definieren von zu Regel folgendermaßen:

 .Element Position: relativ; Animation: Slide 3s-Einstieg;  @keyframes slide from left: 0;  zu left: 400px; 

Die Erstellung komplexer Animationen ist eine eigene Kunstform. Wenn Sie interessiert sind, können Sie in zwei Animationsanleitungen lesen, wie Sie einen erweiterten Auswahlrahmen erstellen und einen Absprungeffekt erstellen.

Wenn Sie Übergänge und Animationen erstellen, müssen Sie das wissen Nicht alle CSS-Eigenschaften können animiert werden, Daher ist es immer ratsam, die zu ändernde Eigenschaft in CSS Animatable zu überprüfen.

CSS3-Animationen und -Übergänge arbeiteten lange Zeit mit Herstellerpräfixen, die wir nicht mehr verwenden müssen. Das Mozilla Developer Network empfiehlt jedoch immer noch, das -Webkit Präfix für eine Weile, da die Unterstützung für Webkit-basierte Browser erst vor kurzem Stabilität erreicht hat.