• Haupt / Andere

12 Tipps für erstaunliche CSS-Animationen

Gut gemacht, kann CSS-Animation Ihrer Site Leben einhauchen und Ihre Benutzer einbeziehen, ohne dass zusätzliche Bibliotheken aufgebläht werden. Das Bereitstellen durchdachter, flüssiger Animationen, die Ihrer Website eine bedeutende Tiefe verleihen, muss nicht schwierig sein. Moderne CSS-Eigenschaften bieten Ihnen jetzt fast alle Tools, die Sie benötigen, um unvergessliche Erlebnisse für Ihre Benutzer zu schaffen.

In diesem Artikel werden einige wichtige Tipps aufgeführt, wie Sie die vollen Funktionen der interaktiven CSS-Animation nutzen können. Während Sie hier sind, möchten Sie vielleicht auch unsere Zusammenfassung von erstaunlichen sehen Beispiele für CSS-Animationen .

Viele dieser Tipps beziehen sich auf Disneys Animationsprinzipien - und in der Tat wäre jeder anständige Artikel über das Erstellen von Animationen nicht zu erwähnen. Lesen Sie unseren speziellen Artikel über Die 12 Grundprinzipien der Animation von Disney für eine vollständige Anleitung. Diese wurden in Frank Thomas und Ollie Johnstons wegweisendem Buch vorgestellt Die Illusion des Lebens und bilden einen guten Ausgangspunkt für Animationsanfänger.

01. Halten Sie sich an die vier Kernmerkmale

Die CSS-Animation bietet eine relativ einfache Möglichkeit, einen großen Bereich von Eigenschaften reibungslos zu überführen. Gute solide animierte Schnittstellen hängen von einem reibungslosen, flüssigen Erlebnis ab. Zu diesem Zweck wird dies am besten mit mehr als 60 FPS (Frames pro Sekunde) erreicht. Um die Leistung in unseren Animationszeitplänen aufrechtzuerhalten, möchten wir unser Bestes geben, um unsere animierten Eigenschaften auf einen Kern von vier zu beschränken:

• Skala - transformieren: Skala (2)
• Position - transformieren: translateX (50rem)
• Rotation - transformieren: drehen (180 Grad)
• Deckkraft - Opazität: 0,5

Das Animieren von Eigenschaften wie Randradius, Höhen / Breiten oder Rändern wirkt sich auf die Layoutlayoutmethoden des Browsers aus, und das Animieren von Hintergründen, Farben oder Feldschatten wirkt sich auf die Malmethoden des Browsers aus und senkt Ihre FPS erheblich. Das Animieren dieser Eigenschaften kann einige interessante Effekte erzielen, sie sollten jedoch sparsam eingesetzt werden, um die Leistung aufrechtzuerhalten.

02. Geschwindigkeit einführen

Eines der Hauptprinzipien von Disney bei der Animation ist Squash und Stretch. Während dies für eine saubere, moderne Website etwas zu verspielt klingt, sind Squash und Stretch Prinzipien, die die wahrgenommene Leistung fördern. Das heißt, wir können ein Gefühl für die Seitenleistung vermitteln, das möglicherweise nicht genau mit unseren technischen Metriken übereinstimmt. Indem wir bewegte Elemente quetschen oder dehnen, geben wir ihnen die Illusion einer größeren (oder geringeren) Geschwindigkeit und verleihen unserer Seite wieder ein Gefühl von echter Fließfähigkeit.

03. Holen Sie sich das richtige Timing

Unabhängig davon, für welche Bibliothek oder welchen Stapel Sie sich entscheiden, ist das Timing und die Vereinfachung Ihrer Animationen entscheidend, um Ihren Benutzern ein flüssiges Erlebnis zu bieten, das sich natürlich und intuitiv anfühlt. Glücklicherweise haben wir viele hervorragende Optionen, die direkt in CSS integriert sind, um ein organischeres Gefühl zu vermitteln.

Die CSS-Spezifikation bietet uns einige großartige native Beschleunigungsfunktionen, die natürlichste Easy-In-Out Dies ermöglicht es dem Animations-Timing, Geschwindigkeit zu gewinnen und zu verlieren, wenn die Animation beginnt und endet. Eine tiefere Anpassung ist jedoch möglich und manchmal notwendig - und zusätzlich JS-Bibliotheken sind nicht immer die Antwort.

Eingeben kubischer Bezier . Es ist hilfreich, sich Ihr Animations-Timing so vorzustellen, als ob Sie einer vertikalen Kurve folgen, als würden Sie einen Ball einen Hügel hinauf oder hinunter rollen und dabei feststellen, wie sich die Geschwindigkeit mit jeder Änderung des Neigungsgrads ändert. Mit der Cubic-Bezier-Funktion können wir unsere Animation oder den Übergang zu diesen Kurven effektiv abbilden und dabei sowohl die Antizipation - das effektive Aufwickeln oder Einführungsbild unserer Animation - als auch das Follow-Through, das die endgültigen Bilder sind, berücksichtigen der Animation.

Durch den Zugriff auf diese Eigenschaften können wir unserer Animation eine realistischere Physik wie Elastizität verleihen. Besuchen Sie das Excellent, um einen hervorragenden visuellen Indikator für die Funktionsweise dieser Funktionen zu erhalten (und um sie selbst zu testen) easings.net von Andrey Sitnik. Wenn Sie mit den Kurven und Ziehpunkten des Vektorzeichnens vertraut sind, werden Sie sofort erkennen, wie kubischer Bezier funktioniert.

Da CSS-Animations-Keyframes im Allgemeinen mehrere Segmente enthalten und sich selten direkt von 1 auf 100% bewegen, ist es wichtig, dass Sie berücksichtigen, dass andere Timing-Funktionen als linear wird vom Anfang bis zum Ende der Bewegungskurve für jedes Segment ausgeführt.

Beispiel: Animations-Keyframes reichen von 0% - 25% - 75% - 100% und werden verwendet Easy-In-Out als Timing-Funktion. Dies bedeutet, dass sich die Animation bei drei Gelegenheiten effektiv ein- und auslädt. Aus diesem Grund können die Animations-Timing-Funktionen bei Bedarf auch innerhalb der Keyframe-Ketten selbst geändert werden. So fähig wie kubischer Bezier ist manchmal am besten für CSS-Übergänge geeignet. Überprüfen Sie den CodePen unten.

04. Stoppen Sie und beginnen Sie mit dem Animationsspielstatus

Verwendung der Animations-Play-Status Eigenschaft können Sie Ihre Animationen einfach starten oder anhalten. Beispielsweise möchten Sie möglicherweise eine Animation beim Schweben anhalten. Verwenden Sie dazu Animations-Wiedergabe-Status: angehalten . Diese Option bietet Ihren Benutzern ein höheres Maß an Interaktivität. In Verbindung mit durch Kommas getrennten verketteten Animationseigenschaften oder einigen kurzen Zeilen JavaScript können wir genau definieren, wann eine Animation aktiv sein soll.

05. Denken Sie an Barrierefreiheit

Bei der Verbesserung unserer Benutzererfahrung mit Animationen denken wir häufig nicht an die Barrierefreiheit. Nicht jeder kann Bewegung im Web genießen. Bei einigen Benutzern - z. B. bei Anfällen - kann dies möglicherweise schwerwiegende gesundheitliche Probleme verursachen.

Glücklicherweise gibt es eine zunehmend gut unterstützte Medienabfrage, die wir verwenden können: bevorzugt-reduzierte-Bewegung . Diese Abfrage arbeitet mit den Betriebssystemeinstellungen eines Benutzers zusammen, sodass wir unsere Animationen nach Bedarf einschränken können. Stellen Sie sich zum Beispiel vor, wir verwenden eine besonders frenetische Animation, um ein Gefühl der Dringlichkeit zu vermitteln und den Benutzer auf a aufmerksam zu machen Aufruf zum Handeln . Verwenden von bevorzugt-reduzierte-Bewegung Wir können dieses Element statisch halten.

@media (prefers-reduced-motion: reduce){ .wildlyFlailing{ animation:none; }}

Einige 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 bewegungsempfindliche Benutzer ansprechen. Wenn ein Element auf Animation angewiesen ist, um es in die Position des Ansichtsfensters zu verschieben, möchten wir sicherstellen, dass es seine Position über eine zweistufige Animation oder mit einem 0s-Übergang ändert.

06. Verketten Sie Ihre Animationen für die Wirkung

Eine der am meisten übersehenen Funktionen von CSS-Animationen ist die Option, Ihre Animationen zu verketten. Das heißt, wir können jede Animation separat durch Komma-Trennung definieren und sie gleichzeitig ausführen.

Zum Beispiel können wir eine Animation erstellen, um unser Element zu drehen, eine sekundäre Animation, um die Hintergrundgröße zu skalieren, und eine tertiäre Animation, um die Deckkraft zum Ein- und Ausblenden anzupassen. Darüber hinaus können wir diesen Animationen weitere Eigenschaften zuweisen, z. B. durch Kommas getrennte Werte, um Verzögerungen, Timing-Funktionen, Dauern oder sogar Wiedergabezustände zu steuern.

Verkettete Animationen können eine Menge Anpassungen erfordern, um alle bewegten Eigenschaften zu synchronisieren. Sie bieten uns jedoch auch eine umfassende Kontrolle darüber, wie wir die einzelnen animierten Eigenschaften zeitlich festlegen und vereinfachen, wodurch komplexe Bewegungen mit weitaus weniger CSS-Gesamtzeilen erstellt werden (oder notwendige DOM-Elemente).

07. Verwenden Sie Willensänderung, um die Leistung zu steigern

Eine hervorragende Eigenschaft, die in jedem einzelnen CSS-Animator-Toolkit enthalten ist, ist die wenig bekannte, aber sehr nützliche Eigenschaft wird sich verändern . Früher gab es eine Reihe von Hacky-Methoden, mit denen Sie den Browser zur Hardware verleiten konnten, um unsere animierten oder übergegangenen Eigenschaften zu beschleunigen - und sie funktionierten irgendwie. Jetzt haben wir jedoch eine spezielle Eigenschaft, die wir nutzen können. und wird sich verändern kann Ihrer Animationsleistung den nötigen Schub verleihen.

Zwar gibt es einige verallgemeinerte Standardwerte für wird sich verändern In der Regel möchten wir festlegen, welche Eigenschaft für welches Element aktualisiert werden soll, z Willensänderung: transformieren oder, wo eine Verkettung notwendig ist, Willensänderung: Randradius, Deckkraft .

Einfach gesagt, die wird sich verändern Die Eigenschaft teilt unserem Browser mit, dass sich diese Elemente - Überraschung - ändern werden. Infolgedessen wird die Leistung dieser Elemente im Allgemeinen priorisiert und die Hardware beschleunigt.

Lasst uns wird sich verändern all die Dinge! Nein, nein, keine Überbeanspruchung dieser Eigenschaft oder die Priorisierung aller animierten oder überarbeiteten Elemente belastet die Hardware stärker als sie kompensiert. Denken Sie also daran, sparsam und nur für Animationen oder Übergänge zu verwenden, die für die Erfahrung, die Sie erstellen, von entscheidender Bedeutung sind. wird sich verändern kann den Schub geben, den Sie brauchen.

08. Animieren Sie den Typ mit variablen Schriftarten

Typografie war schon immer schwierig zu animieren. Sicher, wir können die Schriftgröße (eine Eigenschaft, die durch Animieren des Maßstabs besser gehandhabt wird) und die Farbe animieren, aber mit der Einführung von variable Schriftarten Wir haben jetzt eine ganze Reihe neuer animierbarer Optionen in unserem Toolkit.

Für die nicht eingeweihten, variablen Schriftarten enthalten mehrere Schriftartenvarianten in einer einzigen Schriftartdatei, mit möglichen Variationen in Gewicht, Winkeln, Dekorationen und mehr. Darüber hinaus können diese Variationen alle mit CSS animiert werden Einstellungen für Schriftartenvariationen . Auf diese Weise können wir jetzt reibungslos von normal zu kursiv, leicht zu fett oder von Swashes zu Swash-less wechseln, alles mit dem Gefühl eines verwandelnden SVG - denn in vielerlei Hinsicht passiert genau das hier.

09. Verwenden Sie Variablen, um die Konsistenz zu gewährleisten

Eine gute Möglichkeit, die Konsistenz aufrechtzuerhalten, besteht darin, CSS-Variablen oder Präprozessorvariablen zu verwenden, um Ihr Animations-Timing zu definieren.

:root{ timing-base: 1000;}

Das Festlegen einer Basisanimation oder einer Übergangsdauer ohne Definition einer Einheit (Sekunden oder Millisekunden) bietet uns die Flexibilität, diese Dauer innerhalb von a aufzurufen calc () Funktion. Während die Dauer von unserer Basis-CSS-Variablen abweichen kann, handelt es sich immer um eine einfache Änderung dieser Anzahl und um eine konsistente Erfahrung.

10. Halten Sie die Dinge mit einem Bogen natürlich

Wir kehren wieder zu den 12 Prinzipien der Animation von Disney zurück und sehen die Erwähnung des Bogens. Der fragliche Bogen bezieht sich auf die inhärent kreisförmige Bewegung, in der die meisten natürlichen Bewegungen auftreten. Sehr selten beobachten wir im täglichen Leben Bewegungen in einer geraden Linie. Und obwohl es einfacher ist und weniger Keyframes erfordert, streng von links nach rechts oder von oben nach unten zu animieren, können wir unseren Benutzern eine verlässlichere Erfahrung bieten, indem wir diesen Bogen berücksichtigen und gleichzeitig anerkennen, dass einige Layouts uns letztendlich verbieten Animieren unserer Elemente um gekrümmte Pfade (was häufig zu Interferenzen mit anderen Elementen führt).

11. Spielen Sie es ab

Manchmal ist es am besten, eine Bildschirmaufnahme zu erstellen, um wirklich ein Gefühl dafür zu bekommen, wie sich Ihre Schnittstellenanimationen entwickeln. Zu sehen, wie etwas funktioniert, ist natürlich eine gute Möglichkeit, um sicherzustellen, dass Ihre Animationen wie gewünscht funktionieren.

Wie stellt der Autor dieses Artikels sicher, dass er bekommt, was er will? Als Terminal-Oversharer von CodePen-Demos liebt er es, Screencap-GIFs seiner Animationen zu erstellen. Das Einwählen dieser GIFs und das gute Schleifen dient einem anderen Zweck. Es ermöglicht ihm, die Animationen zu überprüfen und Probleme mit dem Timing oder der Lockerung zu diagnostizieren.

12. Denken Sie an Staffelung

Wenn Sie mit geometrischen oder musterbasierten CSS-Animationen arbeiten, kann es oft hilfreich sein, unsere Animationen mithilfe von Animationsverzögerungen zu verschieben. Dies kann problematisch werden, wenn das Element das Ansichtsfenster betreten hat, wir den Benutzer jedoch bitten, auf den Beginn der Animation zu warten. Wir können dieselbe Art von Animationsversatz mit negativen Verzögerungen erzielen, indem sichergestellt wird, dass die Animationszeitleiste beim Laden der Seite sofort gestartet wird, ohne dass der Benutzer warten muss.

Dieser Artikel erschien ursprünglich in der Zeitschrift Web Designer. Entdecken Sie alle unsere Webdesign-Artikel hier .

Besuchen Sie uns im April 2020 mit unserer Reihe von JavaScript-Superstars bei GenerateJS - der Konferenz, die Ihnen hilft, besseres JavaScript zu erstellen. Buchen Sie jetzt bei generateconf.com

Weiterlesen:

• Die besten Achtsamkeits-Apps zum Ausprobieren
• 6 Schritte zum Schreiben von besserem CSS
• Die besten Webbrowser im Jahr 2020