Professionel erstellte CSS-Animationen können Ihrer Website mehr Leben einhauchen und Ihre Benutzer ohne die Aufblähung zusätzlicher Bibliotheken einbinden. Es erfordert nicht jahrelange Berufserfahrung, durchdachte, fließige Animationen zu erstellen, die Ihrer Website eine sinnvolle Tiefe verleihen – mit modernen CSS-Eigenschaften stehen Ihnen jetzt fast alle Tools zur Verfügung, die Sie benötigen, um Ihren Benutzern unvergessliche Erlebnisse zu bieten.
In diesem Artikel geben wir Ihnen einige nützliche Tipps, wie Sie die Möglichkeiten interaktiver CSS-Animationen voll ausschöpfen können. Also legen wir los.
Halten Sie sich an die vier wichtigsten Eigenschaften.
CSS Animationen bietet eine relativ einfache Möglichkeit, eine große Bandbreite von Eigenschaften reibungslos zu überführen. Gute, solide animierte Interfaces sind von einer reibungslosen, flüssigen Erfahrung abhängig und zu diesem Zweck wird dies am besten bei 60+ FPS (Frames pro Sekunde) erreicht. Um die Leistung in unseren Animationszeitlinien aufrechtzuerhalten, werden wir unser Bestes versuchen, unsere animierten Eigenschaften auf einen Kern von vier zu beschränken:
- Scale – transform:scale (2)
- Position – transform:translateX(50rem)
- Rotation – transform: rotate(180deg)
- Opacity – opacity: 0.5
Die Animation von Eigenschaften wie Randradius, Höhen/Breiten oder Rändern beeinflusst die Browser-Layoutmethoden und die Animation von Hintergründen, Farben oder Kästchenschatten beeinflusst die Browser-Paintingmethoden und lässt Ihre FPS erheblich sinken. Die Animation dieser Eigenschaften kann einige interessante Effekte erzielen, sollte aber zur Erhaltung der Leistung nur sparsam eingesetzt werden.
Leitet Geschwindigkeit ein.
Eines von Disneys Kernprinzipien der Animation ist Squash und Stretch. Auch wenn dies für eine saubere, moderne Webseite etwas zu spielerisch klingen mag, sind Squash und Stretch Prinzipien, die die wahrgenommene Leistung einflößen, d.h. wir sind in der Lage, ein Gefühl für die Leistung der Seite zu vermitteln, das nicht unbedingt mit unseren technischen Metriken übereinstimmt. Indem wir Elemente in Bewegung quetschen oder strecken, geben wir ihnen eine Illusion von größerer (oder geringerer) Geschwindigkeit, was wiederum unserer Seite ein Gefühl echter Fluidität verleiht.
Den richtigen Zeitpunkt finden.
Unabhängig davon, welche Bibliothek oder welchen Stack Sie nutzen möchten, sind das Timing und die Leichtigkeit Ihrer Animationen entscheidend, um ein flüssiges Erlebnis zu bieten, das sich für Ihre Nutzer natürlich und intuitiv anfühlt. Glücklicherweise haben wir viele ausgezeichnete Optionen direkt in CSS eingebakt, um ein organischeres Gefühl zu vermitteln.
Die CSS-Spezifikation bietet uns einige ziemlich großartige native Funktionen zur Erleichterung, wobei die natürlichste die Ease-in-out-Funktion ist, die es ermöglicht, die Geschwindigkeit der Animation zu erhöhen und zu verringern, wenn die Animation beginnt und endet. Aber tiefere Anpassungen sind möglich und manchmal auch notwendig – und zusätzliche JS-Bibliotheken sind nicht immer die Antwort.
Geben Sie Cubic-Bezier ein. Es ist hilfreich, sich das Timing Ihrer Animation vorzustellen, dass Sie einer vertikalen Kurve folgen, als ob Sie einen Ball einen Hügel hinauf- oder hinterrollen würden, wobei Sie sich merken, wie sich die Geschwindigkeit mit jeder Änderung des Neigungsgrads verschiebt. Mit der Cubic-Bezier-Funktion können wir unsere Animation oder den Übergang zu diesen Kurven effektiv abbilden, wobei wir sogar sowohl die Vorwegnahme – die effektiven Aufzieh- oder Einführungsbilder unserer Animation – als auch die Nachfolge, d.h. die letzten Bilder der Animation, berücksichtigen können.
Mit dem Zugang zu diesen Eigenschaften können wir unserer Animation eine realistischere Physik, wie z.B. Elastizität, verleihen. Um einen großartigen visuellen Indikator dafür zu erhalten, wie diese Funktionen funktionieren könnten, besuchen Sie das ausgezeichnete easings.net von Andrey Sitnik. Wenn Sie mit den Kurven und Griffen der Vektorzeichnung vetraut sind, werden Sie sofort erkennen, wie Cubic-Bezier funktioniert.
Da CSS-Animations-Keyframes in der Regel mehrere Segmente enthalten, die sich selten direkt von 1 bis 100% bewegen, ist es wichtig, dass Sie bedenken, dass jede andere als lineare Zeitfunktion vom Anfang bis zum Ende der Bewegungskurve für jedes Segment ausgeführt wird.
Beispiel: Die Keyframes der Animation reichen von 0% – 25% – 75% – 100% und verwenden als Zeitfunktion ease-in-out. Dies bedeutet, dass die Animation sich bei drei Gelegenheiten effektiv ein- und ausfahren lässt. In diesem Sinne können die Timing-Funktionen der Animation bei Bedarf auch innerhalb der Keyframe-Ketten selbst geändert werden. So leistungsfähig wie Cubic-Bezier ist, eignet es sich in manchen Fällen am besten für CSS Transitions.
Anhalten und mit dem Animation-Play-State beginnen.
Mit der Eigenschaft „Animation-Play-State“ können Sie Ihre Animationen einfach starten oder pausieren. Zum Beispiel können Sie eine Animation beim Hovern anhalten. Verwenden Sie dazu die Eigenschaft Animation-Play-State: Pause. Diese Option bietet Ihren Nutzern ein höheres Maß an Interaktivität und in Verbindung mit kommagetrennten, verketteten Animationseigenschaften oder einigen kurzen JavaScript-Zeilen können wir genau definieren, wann eine Animation aktiv sein soll.
Denken Sie über die Barrierefreiheit nach.
Wenn wir daran arbeiten, unsere User Experience mit Animationen zu verbessern, denken wir oft nicht an die Barrierefreiheit. Nicht jeder kann Bewegungen im Web genießen. Für einige Nutzer – wie z.B. solche, die zu Krampfanfällen neigen – könnte sie möglicherweise ernsthafte Gesundheitsprobleme verursachen.
Glücklicherweise gibt es eine zunehmend gut unterstützte Medienanfrage, die wir nutzen können: Bevorzugt – weniger Bewegung. Diese Abfrage arbeitet mit den Betriebssystemeinstellungen des Nutzers zusammen und ermöglicht es uns, unsere Animationen nach Bedarf einzuschränken. Stellen Sie sich zum Beispiel vor, wir verwenden eine besonders frenetische Animation, die dazu dient, ein Gefühl der Dringlichkeit zu vermitteln und den Nutzer zu einem Call-to-Action zu bewegen. Durch die Verwendung von präferenzreduzierter Bewegung können wir dieses Element statisch erhalten.
Ein paar wichtige Dinge, die Sie beachten sollten: Wenn animierte Elemente einen Animationsfüllmodus verwenden, der einen Endzustand definiert, stellen Sie sicher, dass Elemente in diesem Endzustand geladen werden, wenn Sie auf bewegungsempflindliche Nutzer zielen. Wenn ein Element auf eine Animation angewiesen ist, um es in die Ansichtsfenster-Position zu bewegen, müssen wir sicher sein, dass es seine Position über eine gestufte Zwei-Frame-Animation oder mit einem 0s-Übergang ändert.
Verketten Sie Ihre Animationen.
Eine der am meisten übersehenen Möglichkeiten der CSS-Animation ist die Möglichkeit, Ihre Animationen zu verketten. Das heißt, wir können jede Animation separat durch Komma-Trennung definieren, sie aber trotzdem in Tandem ausführen.
So können wir beispielsweise eine Animation erstellen, um unser Element zu drehen, eine sekundäre Animation, um die Größe des Hintergrunds zu skalieren und eine tertiäre, um die Deckkraft zum Ein- und Ausblenden anzupassen. Darüber hinaus können wir weitere Eigenschaften auf diese Animationen anwenden, wie z.B. durch Komma getrennte Werte zu Steuerung von Verzögerungen, Zeitfunktionen, Dauer oder sogar Spielzuständen.
Während verkettete Animationen eine gute Menge an Optimierungen erfordern können, um alle Eigenschaften in Bewegung zu synchronisieren, bieten sie uns auch eine große Menge an granularer Kontrolle darüber, wie wir die Zeit und die Leichtigkeit jeder animierten Eigenschaft wählen, um komplexe Bewegungen mit viel weniger Gesamtzeilen von CSS (oder notwendigen DOM-Elementen) zu erzeugen.
Will-Change zur Leistungssteigerung nutzen.
Eine hervorragende Eigenschaft, die in jedes einzelne CSS-Animator-Toolkit gehört, ist das wenig bekannte, aber sehr nützliche Will-Change. Früher gab es eine Reihe hackiger Methoden, mit denen man den Browser durch Tricks in die Hardware bringen konnte, um unsere animierten oder übergangsweisen Eigenschaften zu beschleunigen – und sie haben irgendwie funktioniert. Jetzt haben wir jedoch eine spezielle Eigenschaft, die wir anzapfen können und Will-Change kann Ihrer Animationsperformance den nötigen Schub verleihen.
Es gibt zwar einige verallgemeinerte Standardwerte für Will-Change, aber in der Regel wollen wir definieren, welche Eigenschaft bei welchem Element aktualisiert wird – wie z.B. Will-Change: Transformation oder wo Chaining notwendig ist, Will-Change: border-radius, opacity.
Einfach ausgedrückt, die Eigenschaften Will-Change kommuniziert unserem Browser, dass sich diese Elemente – überraschen – ändern werden. Als Folge davon wird die Leistung dieser Elemente im Allgemeinen priorisiert und die Hardware beschleunigt.
Sollten wir jetzt alles ändern – eine übermäßige Nutzung dieser Eigenschaft oder die Priorisierung aller Ihrer animierten oder übergangsweise eingefügten Elemente wird die Hardware mehr belasten als sie ausgleicht. Denken Sie also daran, dass eine sparsame Verwendung und nur für Animationen oder Übergänge, die für die Erfahrung, die Sie aufbauen, entscheidend sind, durch Will-Change den nötigen Auftrieb geben kann.
Animierte Schrift mit variablen Schriftarten.
Typographie war schon immer schwierig, richtig zu animieren. Sicher, wir können Schriftgröße (eine Eigenschaft, die durch die Animationsskala besser gehandhabt wird) und Farbe animieren, aber mit der Einführung von variablen Schriftarten haben wir jetzt einen ganz neuen Satz von animierbaren Optionen in unserem Toolkit.
Für die Uneingeweihten enthalten variable Schriftarten mehrere Schriftartenvariationen in einer einzigen Schriftdatei, mit möglichen Variationen in Gewicht, Winkeln, Dekorationen und mehr. Darüber hinaus sind diese Variationen alle in CSS mit Hilfe von Schriftartvariations-Einstellungen animierbar. Damit sind wir nun in der Lage, von normal zu kursiv, leicht zu fett oder von Zickzack zu swaashless zu wechseln und das alles mit dem Gefühl eines morphenden SVG – denn genau das passiert hier in vielerlei Hinsicht.
Verwenden Sie Variablen, um die Dinge konsistent zu halten.
Eine gute Möglichkeit, die Konsistenz zu wahren, ist die Verwendung von CSS-Variablen oder Präprozessor-Variablen, um das Timing Ihrer Animation zu definieren.
Das Festlegen einer Baseline Animation oder Transition Duration ohne Definition einer Unit (Sekunden und Millisekunden) gibt uns die Flexibilität, diese Dauer innerhalb einer calc()-Funktion aufzurufen. Die Dauer kann zwar von unserer Basis-CSS-Variablen abweichen, aber es wird immer eine einfache Modifikation dieser Zahl sein und eine konsistente Erfahrung beibehalten.
Die Dinge mit einem Arc natürlich halten.
Um noch einmal auf die 12 Prinzipien der Animation von Disney zurückzukommen, wird der Arc erwähnt. Der fragliche Arc bezieht sich auf die inhärent kreisförmige Bewegung, in der die meisten natürlichen Bewegungen auftreten. Sehr selten im täglichen Leben beobachten wir Bewegungen in einer gerade Linie. Obwohl es einfacher ist und weniger Keyframes erfordert, streng von links nach rechts oder von oben nach unten zu animieren, können wir unseren Nutzern ein besser verwendbares Erlebnis bieten, indem wir diesen Arc im Auge behalten und gleichzeitig anerkennen, dass einige Layouts es uns letztlich verbieten, unsere Elemente auf gekrümmten Bahnen zu animieren (was oft zu Interferenzen mit anderen Elementen führt).
Abspielen.
Manchmal ist der beste Weg, um wirklich ein Gefühl dafür zu bekommen, wie sich Ihre Schnittstellenanimationen entwickeln, die Erstellung eines Screen Recordings. Zu sehen, wie etwas funktioniert, ist natürlich eine gute Möglichkeit, um sicherzustellen, dass Ihre Animationen so funktionieren, wie Sie wollen.
Wie stellen wir also sicher, dass wir auch das bekommen, was wir möchten? Da wir an den CodePen-Demos zu häufig teilnehmen, lieben wir es, Screencap-GIFs der entsprechenden Animationen zu erstellen. Die Einwahl in diese GIFs und ihre schöne Schleifenbildung dient eigentlich einem anderen Zweck. Es erlaubt ihm, die Animationen zu überprüfen und eventuelle Probleme mit der Zeitplanung oder dem Easing zu diagnostizieren.
Machen Sie sich über das Staggering Gedanken.
Bei der Arbeit mit geometrischen oder musterbasierten CSS-Animationen in Schleifen kann es oft hilfreich sein, unsere Animationen mit Hilfe von Animationsverzögerungen zu staffeln. Dies kann problematisch werden, wenn das Element in das Ansichtsfenster gelangt, wir den Nutzer aber bitten, auf den Beginn der Animation zu warten. Wir können dieselbe Art von Animationsversatz durch negative Verzögerungen erreichen, indem wir sicherstellen, dass die Timeline sofort beim Laden der Seite gestartet wird, ohne Wartezeiten für den Nutzer.
Wir hoffen, dass wir Ihnen einige nützliche Tipps für Ihre CSS-Animationen geben konnten. Wenn Sie noch Fragen oder Anregungen haben sollten, hinterlassen Sie uns unten einen Kommentar.
Vielen Dank für Ihren Besuch.
Leave A Comment