Share
CSS ist im Laufe der Jahre in vielerlei Hinsicht gereift, nicht zuletzt in Bezug auf CSS-Animationen. Mit jedem Tag, der vergeht, schaffen immer mehr Entwickler lebendige, atmende Schnittstellen. In diesem Artikel werden wir den Stand der CSS-Animationen betrachten, wie er gewachsen ist, was heute möglich ist, und einige Ressourcen und Werkzeuge behandeln. Lasst uns aufbrechen!
Die Verwendung von Animationen im Internet nimmt zu, hauptsächlich wegen der Übergang und @keyframes Ergänzungen zu CSS. Es gab einmal eine Zeit, in der sich Animationen und CSS nicht kannten, aber das ist heute nicht der Fall. Artikel, Tutorials, Premium-Kurse und sogar Bewegungsrichtlinien sind heute viel zugänglicher als früher. Kombinieren @keyframes mit dem Animation Eigentum zusammen mit Übergang Entwickler haben endlich die Chance erhalten, Bewegungen richtig zu gestalten und Schnittstellen eine Persönlichkeit und ein Leben zu verleihen, die unberücksichtigt bleiben.
Aus den Google Material Motion-RichtlinienEs war noch nie eine spannendere Zeit für CSS-Animationen und Interaktionsdesign als jetzt!
Aktuelle Implementierung des Animation Mit dieser Eigenschaft können Entwickler die Dauer, das Timing, die Verzögerung, die Anzahl der Iterationen, die Richtung, den Füllmodus und den Wiedergabezustand steuern. Der Zeitsteuerabschnitt erlaubt auch a Schritte() Funktion. Diese spezielle Timing-Funktion unterteilt eine Animation oder einen Übergang in Segmente (wie einen Filmstreifen) und nicht als einen kontinuierlichen Übergang von einem Zustand in einen anderen. Mithilfe von Keyframes können Bewegungsentwickler Positionen mit deklarieren von, zu und sogar Prozentsätze, um zwischen den deklarierten Eigenschaftswerten zu animieren. Das ist ein toller Start, aber wir werden in einem Moment diskutieren, wo es zu kurz kommt.
Dann gibt es das herrliche Übergang Eigentum; eine Immobilie, die genauso schick ist wie Animation und eine, mit der wir die Animationsgeschwindigkeit beim Ändern von Eigenschaften steuern können. Der Übergang zwischen zwei Zuständen wird typischerweise als bezeichnet impliziter Übergang; ein Begriff, der die vom Browser implizit definierten Zustände zwischen Start- und Endzustand beschreibt. Übergänge ermöglichen derzeit die Anpassung der Eigenschaft, des Zeitpunkts, der Dauer und der Verzögerung.
Das Intro-Video oben stammt von Craig Campbell.
CSS-Animationen sind zwar mächtig, aber es fehlt immer noch ein bestimmter Aspekt, den die Animatoren am meisten wünschen. zeitlinienähnliche Steuerung. Was ich damit meine, sind Sequenzen, die basierend auf dem Timing beeinflusst und manipuliert werden können.
@keyframes move-object from Ausgangspositionseigenschaft und Werte bei 2s do this wait-warten 4s Dies geschieht an Stopspositionseigenschaft und -werte
Die obige Syntax existiert nicht, zeichnet jedoch ein detaillierteres Bild davon, was sich Animationsexperten im Web wünschen. GreenSock ist beispielsweise für diese Art von Sequenzierung bekannt, geschieht aber leider nur in JavaScript. Wäre es nicht toll, dies auch in CSS zu haben? Ich glaube schon.
Das Video von GreenSock Animation Platform: Erste Schritte von Craig Campbell.
Es gibt sicherlich die Fähigkeit zur Kontrolle Animation und Übergang Ereignisse durch die Verwendung von JavaScript zur weiteren detaillierten Steuerung einer Sequenz. Mit JavaScript können Entwickler den Beginn jeder neuen Animationsiteration erkennen, wenn eine Animation auftritt, wenn die Animation endet und dasselbe für Übergangsereignisse gilt.
Dies sind ziemlich aufregende Zeiten für Browserentwickler-Tools, um CSS-Animationen zu überprüfen und anzupassen. Die meisten Browser (Firefox, Chrome) ermöglichen die Überprüfung von CSS-Animationen in Bezug auf Safari und Edge. Nach dem, was mir von einer Quelle mitgeteilt wurde, die für Microsoft arbeitet, ist die Inspektion von Animationen etwas, was das Microsoft-Team wirklich tun möchte. Hoffen wir, dass dies auch für Safari gilt.
In Bezug auf die Browser das tun Animationsinspektion unterstützen wir haben die folgenden Fähigkeiten…
Accentsconagua
::Vor und ::nach dem Pseudoelemente.Keyframes Eigenschaft und Werte im Fluge.Keyframes Namen.Entwickler können zwar anhand der obigen Liste ziemlich viel auswählen, benötigen jedoch noch mehr Werkzeuge für Animationen in Bezug auf die Benutzerinteraktion. Dies könnte auch als bekannt sein Eigenschaftsinterpolation, das Einfügen eines Zwischenwertes in eine Reihe durch Berechnen aus umgebenden bekannten Werten; Ähnlich wie beim Wechsel zu einem neuen Wert mit Übergängen. Diese dynamischen / reaktiven Animationen können jederzeit gestartet werden, sind unbegrenzt und haben eine variable Dauer, die auf der Benutzerinteraktion basiert. Wieder etwas, das derzeit nicht von einem Entwickler-Tool, das von einem Browser bereitgestellt wird, überprüft oder überprüft werden kann.
Die Zukunft sieht für CSS-Animationen gut aus, aber mit allen relevanten Spezifikationen tendiert sie dazu, sich langsam zu bewegen. Das CSS Bewegungspfad Modul, enthalten, wird sich verändern und das bevorzugt reduzierte Bewegung Medienabfrage (noch kein Standard und nur WebKit) sind die derzeit anstehenden Funktionen für CSS-Animatoren.
Bewegungspfade ermöglichen es Entwicklern, grafische Objekte entlang eines vom Autor angegebenen Pfads zu animieren. Sie können einen Pfad auf sehr ähnliche Weise definieren, wie in SVG 1.1 definiert.
.my-element Bewegungspfad: Pfad ('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7 0,1-13,3,7,2-22,1,17,1 c-8,9,8,8-15,7,17,9-25,4,17,9s-17,5-7,8-17,5-17,5s7,8-17,5,17,5-17,5S86,2,38,6,93,9,46,4 z '); Bewegungsoffset: 0; Bewegungsrotation: rückwärts; Das Bewegungspfad Definiert einen Pfad, auf den ein Element folgt oder sich bewegt. Unsere Bewegungsversatz Eigenschaft ist die Position des Elements irgendwo auf dem Pfad. Die Eigenschaft Bewegungsrotation ist die Richtung, in die das Element zeigt, wenn es sich entlang des Pfads bewegt.
Schauen Sie sich diese Sammlungen von Demos zu CodePen von Dan Wilson an, die Live-Beispiele zeigen Bewegungspfad Fähigkeiten.
Das wird sich verändern Diese Eigenschaft bietet Autoren die Möglichkeit, Browser über die Art der Änderungen zu unterrichten, die für ein Element erwartet werden. Dadurch kann der Browser vor der eigentlichen Änderung des Elements entsprechende Optimierungen vornehmen.
.my-element will-change: umwandeln;
Diese Art der Optimierung kann die wahrgenommene Ladezeit und das Layout einer Seite verbessern, indem kostspielige Arbeiten vorzeitig erledigt werden, bevor sie tatsächlich benötigt werden. Das heißt, es wird empfohlen, dass sich Entwickler nicht bewerben wird sich verändern zu viele Elemente, da dies Ressourcen verbrauchen und eine Seite verlangsamen kann.
Mit diesem nicht spezifizierten Zusatz zu WebKit werden Stile erstellt, die große Bewegungsbereiche für Benutzer vermeiden, die eine Präferenz für reduzierte Bewegungen festlegen Systemeinstellungen.
@media (bevorzugt reduzierte Bewegung) .my-element animation: keine;
Dies ist eher eine Situation der Zugänglichkeit im Vergleich zur tatsächlichen Bewegungserstellung. Ein interessanter Punkt, den Sie in Betracht ziehen sollten, um ihn in aller Ruhe auszuprobieren.
Dieses CSS-Modul zeigt an, dass die Teilstruktur des Elements unabhängig vom Rest der Seite ist. Dadurch können Benutzeragenten bei korrekter Verwendung umfangreiche Optimierungen vornehmen. Das interessanteste für CSS-Animatoren ist das Farbe Wert, der übergeben werden kann.
.Element-with-Motion enthalten: Farbe;
Wenn das übergeordnete Element nicht auf dem Bildschirm angezeigt wird oder verdeckt ist, kann der Browser das Zeichnen des Inhalts direkt überspringen, da er garantiert außerhalb des Bildschirms oder verdeckt ist. Dies liefert letztendlich einen Mehrwert, indem eine schnellere Renderpipeline während einer ersten Lackierung sichergestellt wird. Dies ist derzeit noch ein Arbeitsentwurf beim W3C.
Es gibt viele Möglichkeiten, mit CSS-Animationen Schritt zu halten. Im Folgenden finden Sie einige Tools und Ressourcen, einschließlich Spezifikationen, die Sie nach Belieben lesen können. Wenn Sie von anderen großartigen und hilfreichen Ressourcen wissen, teilen Sie uns dies bitte in den Kommentaren mit. Wir werden sie der Liste hinzufügen. Viel Spaß beim Animieren!
