Gut genutzt, CSS Animation ist ein unglaublich nützliches und leistungsfähiges Werkzeug. Es kann Interesse oder kreative Aufregung hinzufügen, das Auge des Benutzers lenken, etwas schnell und prägnant erklären und die Benutzerfreundlichkeit verbessern. Aus diesem Grund haben die letzten Jahre immer mehr Animationen auf Websites und in App gesehen.

In diesem Artikel fassen wir einige der coolsten CSS-Animationsbeispiele zusammen, die wir gesehen haben, und zeigen Ihnen, wie Sie sie neu erstellen können., Lesen Sie weiter für eine Reihe von ausführlichen Tutorials und inspirierende Effekte (und Links zu ihrem Code) zu erkunden.

Was ist CSS-animation?

CSS-Animation ist eine Methode zum Animieren bestimmter HTML-Elemente, ohne Prozessor-und speicherhungriges JavaScript oder Flash verwenden zu müssen. Es gibt keine Begrenzung für die Anzahl oder Häufigkeit von CSS-Eigenschaften, die geändert werden können. CSS-Animationen werden initiiert, indem Keyframes für die Animation angegeben werden: Diese Keyframes enthalten die Stile, die das Element haben soll.,

Während es in Bezug auf Animationen begrenzt erscheinen mag, ist CSS tatsächlich ein wirklich leistungsfähiges Werkzeug und kann wunderschön glatte 60fps-Animationen erzeugen. „Die Bereitstellung durchdachter, flüssiger Animationen, die Ihrer Website eine sinnvolle Tiefe verleihen, muss nicht schwierig sein“, sagt Front-End-Webentwickler Adam Kuhn. „Moderne CSS-Eigenschaften bieten Ihnen jetzt fast alle Tools, die Sie benötigen, um unvergessliche Erlebnisse für Ihre Benutzer zu erstellen.,“

Die besten Animationen haben immer noch ihre Wurzeln in Disneys klassischen 12 Prinzipien der Animation – Sie werden mehrere Erwähnungen davon in diesen CSS-Animationsbeispielen sehen, also lohnt es sich, diesen Artikel zu lesen, bevor Sie anfangen. Vielleicht möchten Sie auch unsere Zusammenfassung großartiger animierter Musikvideos erkunden, um weitere Beispiele und Inspirationen zu erhalten.

Die goldene Regel ist, dass Ihre CSS-Animationen nicht übertrieben werden sollten – selbst eine kleine Bewegung kann große Auswirkungen haben und zu viel kann für Benutzer ablenkend und irritierend sein., Hier sind unsere Lieblingsbeispiele und wie man sie neu erstellt.

Fun-mouse-Effekt

  • Autor: Donovan Hutchinson

Dies ist ein Spaß-Effekt folgt, dass Sie mit der Maus um. Dies kann nützlich sein, wenn Sie auf ein Element auf Ihrer Seite aufmerksam machen möchten.

Für diesen Effekt benötigen wir sehr wenig HTML:

<div class="demo"> <div class="perspective-container"> <div class="card"></div> </div></div>

Zuerst positionieren wir die Demo und setzen die Perspektive für unsere 3D-Transformation:

Dann stylen wir das Div, das wir animieren möchten:

Hier setzen wir einen Hintergrund, dann setzen wir overflow auf hidden, damit wir später einen Sheen-Effekt hinzufügen können., Wir setzen auch CSS-Variablen, sheenX und sheenY.

Diese Sheen-Variablen helfen, den Sheen-Effekt zu positionieren. Wir verwenden sie in den folgenden Pseudoelementen unserer Karte:

Hier stellen wir sicher, dass das Pseudoelement größer als der Container ist. Dies gibt uns etwas, um mit transform über die Karte zu gleiten.

Die Eigenschaft transform verwendet die zuvor festgelegten CSS-Variablen. Wir werden diese mit JavaScript festlegen. Lassen Sie uns das JavaScript so einrichten, dass es zuerst auf Mausereignisse wartet:

Dokument.,onmousemove = handleMouseMove;

Wir benötigen jetzt eine handleMouseMove-Funktion, um onmousemove:

Unsere Funktion nimmt die Fensterhöhe und-breite an und erstellt einen Winkel auf der X-und Y-Achse. Wir setzen diese dann auf den Transformationsstil unserer Karte. Dies gibt der Karte einen Winkel basierend auf der Maus!

Als nächstes rufen wir eine Funktion auf, um die Position des Pseudoelements festzulegen:

Unser Pseudoelement sieht am besten aus, wenn es sich in die entgegengesetzte Richtung zur Maus bewegt. Um dies zu erreichen, erstellen wir eine Zahl zwischen -0,5 und 0,5, die sich in die entgegengesetzte Richtung ändert, indem wir das Verhältnis um -1 berechnen.,

Wir multiplizieren diese Zahl mit 800, da sie auf maximal 400 Pixel skaliert werden soll, so weit wir das Sheen-Pseudoelement außerhalb der Karte setzen.

Zuletzt setzen wir diese Offset-Werte auf unsere CSS-Variableneigenschaften, und der Renderer des Browsers erledigt den Rest.

Wir haben jetzt eine Karte, die sich zu unserer Maus dreht, während sich der Glanzeffekt oben in die entgegengesetzte Richtung bewegt. Dies erzeugt einen schönen, auffälligen Effekt.,

The big reveal

  • Autor: Adam Kuhn

Animierte Content-Reveal-Effekte scheinen derzeit sehr beliebt zu sein und werden ordnungsgemäß verwendet Sie können den Benutzerfokus erfassen und Ihr Publikum ansprechen. Sie haben das schon einmal gesehen: Ein Farbblock wächst von der einen oder anderen Seite horizontal oder vertikal und zieht sich dann auf die gegenüberliegende Seite zurück, diesmal mit Text oder einem Bild darunter. Es ist ein Konzept, das schwierig erscheinen mag, aber wirklich auf nur ein paar Dinge beruht.,

Zuerst richten wir unsere Elementpositionierung ein (laden Sie den vollständigen Code hier herunter) – definieren Sie ihn als relativ (nur statisch schlägt in diesem Fall fehl). In einigen Fällen ist es am besten, automatische Höhe und Breite zuzulassen, obwohl ein wenig Auffüllen nicht schadet. Wir definieren auch einen Transformationsursprung, im Fall des übergeordneten Elements möchten wir die Ausgangsposition verwenden. Da das Element zunächst ausgeblendet werden soll, verwenden wir eine Skalierungstransformation entlang der entsprechenden Achse, um es zu verkleinern.

Als nächstes erstellen Sie ein Pseudoelement, um unser übergeordnetes Element zu maskieren und den Transformationsursprung auf die entgegengesetzte Option zu setzen., Schließlich, String zusammen die Animationen, entweder mit den Timing-Funktionen oder Verzögerungen zu jedem Offset.

Hinweis, wir haben die Animationen des übergeordneten und Pseudoelements mit einer Verzögerung versetzt, die dem Feld, das unseren Text verbirgt, mitteilt, dass es erst angezeigt wird, nachdem das Element selbst vollständig in die Ansicht skaliert wurde. Schauen Sie sich den Codepen unten an.

Stagger on

  • Autor: Adam Kuhn

Sobald Sie begonnen haben, eine anständige Bibliothek mit verschiedenen Lockerungsausschnitten zu sammeln, ist es an der Zeit, nach anderen Wegen zu suchen, um die Tiefe Ihrer Animationen zu verbessern, und eine der besten Möglichkeiten besteht darin, Ihre animierten Elemente zu kompensieren.,

Es ist allzu häufig, dass ein JavaScript-Trigger so eingestellt ist, dass er eine Reihe von Animationen basierend auf der Bildlaufposition auslöst, nur um alle Elemente zu finden, die sich effektiv zusammen bewegen. Glücklicherweise bietet CSS selbst eine einfache Eigenschaft, die Ihre animierte Erfahrung machen (oder unterbrechen) kann: Animation-Delay.

Nehmen wir zum Beispiel an, wir haben ein Raster von Bildern, die wir beim Scrollen des Benutzers in einen Rahmen animieren möchten. Es gibt eine Reihe von Möglichkeiten, wie wir dies auslösen können, indem wir den Elementen höchstwahrscheinlich beim Betreten des Ansichtsfensters Klassen hinzufügen., Dies kann jedoch für den Browser eine schwere Belastung sein und kann vermieden werden, indem einfach eine einzelne Klasse zu einem Containerelement hinzugefügt und Animationsverzögerungen für untergeordnete Elemente definiert werden.

Dies ist ein besonders guter Anwendungsfall für Präprozessoren wie SCSS oder WENIGER, mit denen wir eine @for Schleife verwenden können, um jedes Element zu durchlaufen.

#parent{.child{ animation: animationName 1.5s ease-in-out 1 forwards;@for $i from 1 through 20{ &:nth-of-type(#{$i}){animation-delay:#{$i/10}s; }} }}

Hier sehen Sie, dass wir mit SCSS jeden :nth-of-type-Selektor durchlaufen und dann eine Animationsverzögerung basierend auf dem numerischen Wert jedes untergeordneten Elements anwenden können., In diesem Fall werden Sie feststellen, dass wir unser Timing aufteilen, um jedes Inkrement auf einen Bruchteil einer Sekunde zu reduzieren. Während das Versetzen Ihrer animierten Elemente Ihrer Animation Emotionen verleihen kann, kann eine zu große Verzögerung dazu führen, dass sie sich unzusammenhängend anfühlt. Schauen Sie sich diesen CodePen unten an.

Squigglevision

  • Autor: Adam Kuhn

SVG-Filter bieten eine großartige Möglichkeit, ein natürliches, von Hand gezeichnetes Gefühl zu erzielen und einige der Flat-Feeling-Rendering-Einschränkungen von CSS allein zu umgehen. Durch Animieren kann der Effekt weiter verstärkt werden.

Fall in Punkt: Squigglevision., Ja, dies ist kein technischer Begriff, der den meisten Animateuren bekannt ist, aber Sie haben ihn sicherlich in Cartoons verwendet gesehen. Die Idee ist, dass die Kanten dieser animierten Elemente nicht nur etwas gezackt und grob gehauen sind, sondern diese rauen Kanten schnell variieren, Rahmen für Rahmen, so dass sie das Gefühl haben, von den Seiten eines Skizzenbuchs gerissen und zum Leben erweckt worden zu sein.

Um diesen Effekt zu erzielen, können wir eine SVG auf unserer Seite mit mehreren Filtern und leichten Schwankungen der Turbulenzstufen für jeden hinzufügen. Als nächstes richten wir unsere Animationszeitleiste ein und rufen jeden Filter in seinem eigenen Keyframe auf., Es ist wichtig, mit den Zeitdauern zu spielen, da wir davon ausgehen, dass sich die Animation „sprunghaft“ anfühlt, aber nicht so langsam, dass sie sich unzusammenhängend oder so schnell anfühlt, dass sie sich verrückt anfühlt.

Zu diesem Zweck ist es wichtig zu beachten, dass CSS nicht in der Lage ist, reibungslos zwischen SVG-Filtern zu wechseln, da es keine Möglichkeit gibt, auf Eigenschaften wie Turbulenz und Skalierung zuzugreifen, sodass diese Arten von Animationen immer erwartet werden sollten abgehackt.,

Tumbling lettering

  • Wie gesehen auf: Spiel von das Jahr
  • Autor: Leon brown

Googles Spiel des Jahres bietet auf der Homepage eine spielerische CSS-Animation mit den Titelwörtern tumbling und bumping ineinander. Hier ist, wie es gemacht wurde.

Der erste Schritt besteht darin, das Webseitendokument mit HTML zu definieren. Es besteht aus dem HTML-Dokumentcontainer, in dem ein Kopf-und Körperabschnitt gespeichert ist., Während der Head-Bereich zum Laden der externen CSS-und JavaScript-Ressourcen verwendet wird, wird der body zum Speichern des Seiteninhalts verwendet.

Der Seiteninhalt besteht aus drei h1-Titel-Tags, die die verschiedenen Variationen des Animationseffekts anzeigen. Während jeder Text in diese Tags eingefügt werden kann, wird ihre Animation durch die Namen im Klassenattribut definiert. Die Präsentations-und Animationseinstellungen für diese Klassennamen werden später im CSS definiert.

Erstellen Sie als nächstes eine neue Datei mit dem Namen ‚code.js‘., Wir möchten alle Seitenelemente mit der Animate-Klasse finden und eine Array-Liste erstellen, die jedes Wort des inneren Textes darstellt. Die anfängliche Animationsverzögerung wird ebenfalls in diesem Schritt definiert. Der Seiteninhalt ist erst verfügbar, wenn die Seite vollständig geladen ist, sodass dieser Code im Ladeereignis-Listener des Fensters platziert wird.

Der Wortinhalt der Animationselemente muss in einem span-Element enthalten sein. Dazu wird der vorhandene HTML-Inhalt auf leer zurückgesetzt, dann wird eine Schleife verwendet, um das Wort in der identifizierten ‚Wörter‘ – Liste zu einem Span-Element zu machen., Zusätzlich wird ein animationDelay-Stil angewendet-berechnet in Bezug auf die anfängliche Verzögerung (unten angegeben) und die Indexposition des Wortes.

Erstellen Sie eine neue Datei namens “ styles.CSS. Jetzt legen wir die Präsentationsregeln fest, die Teil jedes Wortelements in der Animation sind und von ihrem span-Tag gesteuert werden. Die Anzeige als Block in Kombination mit der zentrierten Textausrichtung führt dazu, dass jedes Wort in einer separaten Zeile angezeigt wird, die horizontal zur Mitte des Containers ausgerichtet ist. Relative Positionierung wird verwendet, um in Bezug auf seine Textflussposition zu animieren.,

.animate span{display: block;position: relative;text-align: center;}

Animationselemente mit der Vor-und Rückwärtsklasse haben eine bestimmte Animation auf sie angewendet. Dieser Schritt definiert die Animation, die auf Span-Elemente angewendet werden soll, deren übergeordneter Container sowohl die Animate-als auch die Backwards-oder Forwards-Klasse hat.

Beachten Sie, dass zwischen der animierten und der Rückwärtsklassenreferenz kein Platz ist, was bedeutet, dass das übergeordnete Element beides haben muss.

Die gemischte Animation wird mit den gleichen Einstellungen definiert, die für die Vorwärts-und Rückwärtsanimationen verwendet werden., Anstatt die Animationen auf jedes Kind des Elternteils anzuwenden, wird der n-te-Child-Selektor verwendet, um abwechselnde Animationseinstellungen anzuwenden. Die Rückwärtsanimation wird auf jedes gerade Zahlenkind angewendet, während die Vorwärtsanimation auf jedes ungerade Zahlenkind angewendet wird.

Die Animationen, die wir gerade erstellt haben, werden mit einer anfänglichen ‚from‘ – Ausgangsposition ohne vertikale Position oder Rotationsanpassung erstellt. Die‘ an ‚ – Position ist der Endzustand der Animation, der die Elemente mit einer angepassten vertikalen Position und einem Rotationszustand festlegt., Für beide Animationen werden leicht unterschiedliche Endeinstellungen verwendet, um zu vermeiden, dass der Text aufgrund von Überlappungen in gemischten Animationen unlesbar wird.

Flip book

  • Autor: Adam Kuhn

Beim Animieren mit CSS ist manchmal ein toter einfacher Ansatz erforderlich. Und es gibt nur wenige einfachere Animationsmethoden als das Flip Book. Mit steps () als Timing-Funktion können wir diesen Effekt replizieren. Dies mag zwar abgehackt klingen und direkt unserer Mission widersprechen, die Fließfähigkeit aufrechtzuerhalten, aber mit dem richtigen Tempo kann es sich genauso nahtlos organisch anfühlen.

Wie funktioniert es also?, Wir definieren unsere Animation Easing-Funktion mit nur wenigen zusätzlichen Parametern-sagen unserer Animation, wie viele Schritte benötigt werden und an welchem Punkt während des ersten Schritts wir beginnen möchten (Start, Ende) – ein wenig so aussehen, zum Beispiel Schritte (10, Start).

In unseren Keyframes können wir jetzt einen Endpunkt für unsere Animation festlegen: Nehmen wir in diesem Beispiel an, dass unsere Animation 10 Sekunden lang ist und wir 10 Schritte verwenden. In diesem Fall ist jeder Schritt eine Sekunde lang und bewegt sich sofort zum folgenden Ein-Sekunden-Rahmen ohne Übergang zwischen.,

Auch hier scheint dies angesichts der Fließfähigkeit zu fliegen, aber hier können gestufte Animationen wirklich glänzen. Wir können inkrementell durch ein Sprite-Blatt iterieren und Frame-für-Frame animieren, genau wie ein Flip-Buch. Indem wir Frames gleicher Größe definieren, sie jedoch zu einem einzelnen horizontalen (oder vertikalen) Bild zusammenstellen, können wir dieses Bild als Elementhintergrund festlegen und eine Pixel-oder prozentuale Hintergrundposition als Endpunkt für unsere Animation definieren, sodass für jeden Frame ein einzelner Schritt möglich ist., Das Sprite-Blatt wird dann verschoben und füllt das Element Frame für Frame mit einem neuen Hintergrundbild basierend auf seiner Position.

schauen wir uns ein Beispiel an. In diesem Fall werden einige Sätze animierter Beine an einige Textzeichen angehängt. Zuerst definieren wir unseren Animationsnamen, die Dauer, die Schrittzahl, die Startposition und die Anzahl der Iterationen: 

animation:runner 0.75s steps(32, end) infinite;

Beachten Sie erneut, dass die Dauer relativ schnell ist bei weniger als einer vollen Sekunde für 32 Gesamtrahmen., Als nächstes definieren wir unsere Keyframes: 

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:-1280px 50%; }}

Beachten Sie, dass die vertikale Positionierung des Bildes durchgehend konsistent ist, was uns sagt, dass die Sprites horizontal über das Bild gestreckt sind, was einer Gesamtbreite von 1280 Pixel entspricht. Da wir 32 Gesamtrahmen für dieses Bild definiert haben, können wir daraus schließen, dass jeder Frame 40 Pixel breit sein sollte. Schauen Sie sich diesen Codepen unten an.

Es ist wichtig zu beachten,dass ein großes Sprite-Blatt möglicherweise die Leistung stark beeinträchtigen kann., Mit einem gut gearbeiteten Sprite Sheet und einer entsprechenden Animationsdauer haben Sie jetzt eine glatte Animation, die komplexe Bewegungen vermitteln kann.

Blasen von Blasen

  • Wie zu sehen auf: 7UP
  • Zeigen Sie den Code an
  • Autor: Steven Roberts

Die CSS-Blasenanimation, die auf 7UP angezeigt wird, ist ein schönes Beispiel dafür, ein Markenthema in das Website-Design zu tragen. Die Animation besteht aus einigen Elementen: der SVG ‚Zeichnung‘ der Blasen und dann zwei Animationen auf jede Blase angewendet.,

Die erste Animation ändert die Deckkraft der Blase und verschiebt sie vertikal in das Ansichtsfeld; Die zweite erzeugt den Wackeleffekt für zusätzlichen Realismus. Die Offsets werden behandelt, indem auf jede Blase gezielt wird und eine andere Animationsdauer und-verzögerung angewendet wird.

Um unsere Blasen zu erstellen, verwenden wir SVG. In unserer SVG erstellen wir zwei Schichten von Blasen: eine für die größeren Blasen und eine für die kleineren Blasen. Innerhalb der SVG positionieren wir alle unsere Blasen am unteren Rand des Ansichtsfelds.,

Um zwei separate Animationen auf unsere SVGs anzuwenden, die beide die Transformationseigenschaft verwenden, müssen wir die Animationen auf separate Elemente anwenden. Das<g Element in SVG kann ähnlich wie ein div in HTML verwendet werden; Wir müssen jede unserer Blasen (die sich bereits in einer Gruppe befinden) in ein Gruppen-Tag einschließen.

<g> <g transform="translate(10 940)"> <circle cx="35" cy="35" r="35"/> </g></g>

CSS verfügt über eine leistungsstarke Animations-Engine und wirklich einfachen Code, um komplexe Animationen zu erstellen., Wir beginnen damit, die Blasen auf den Bildschirm zu bewegen und ihre Deckkraft zu ändern, um sie am Anfang und am Ende der Animation ein-und auszublenden.

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); }}

Um einen Wackeleffekt zu erzeugen, müssen wir einfach die Blase nach links und rechts verschieben (oder übersetzen), genau um den richtigen Betrag – zu viel wird dazu führen, dass die Animation zu schrill und getrennt aussieht, während zu wenig größtenteils unbemerkt bleibt. Experimentieren ist der Schlüssel bei der Arbeit mit Animation.,

@keyframes wobble { 33% { transform: translateX(-50px); } 66% { transform: translateX(50px); } }

Um die Animation auf unsere Blasen anzuwenden, verwenden wir die zuvor verwendeten Gruppen und die Hilfe von nth-of-type, um jede Blasengruppe einzeln zu identifizieren. Wir beginnen mit der Anwendung eines Deckkraftwerts auf die Blasen und die Eigenschaft will-change, um die Hardwarebeschleunigung zu nutzen.

.bubbles-large > g { opacity: 0;will-change: transform, opacity;}.bubbles-large g:nth-of-type(1) {...}....bubbles-small g:nth-of-type(10) {...}

Wir möchten alle Animationszeiten und Verzögerungen innerhalb weniger Sekunden voneinander beibehalten und so einstellen, dass sie sich unendlich wiederholen. Schließlich wenden wir die Ease-in-Out-Timing-Funktion auf unsere Wobble-Animation an, damit sie etwas natürlicher aussieht.,

Maus scrollen

  • Wie zu sehen auf: Baltic Training
  • Den Code anzeigen
  • Autor: Steven Roberts

Eine subtile Mausanimation kann dem Benutzer beim ersten Landen auf einer Website eine Richtung geben. Obwohl dies mit HTML-Elementen und-Eigenschaften erreicht werden kann, werden wir SVG verwenden, da dies eher zum Zeichnen geeignet ist.

In unserem SVG benötigen wir ein Rechteck mit abgerundeten Ecken und einen Kreis für das Element, das wir animieren möchten, mit SVG können wir das Symbol auf jede gewünschte Größe skalieren.,

Jetzt haben wir unsere SVG erstellt, wir müssen einige einfache Stile anwenden, um die Größe und Position des Symbols in unserem Container zu steuern. Wir haben einen Link um die SVG-Maus gewickelt und am unteren Bildschirmrand positioniert.

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);}.mouse { max-width: 2.5rem; width: 100%; height: auto;}

als Nächstes werden wir unsere animation. Bei 0 und 20 Prozent des Weges durch unsere Animation möchten wir den Zustand unseres Elements so einstellen, wie es beginnt. Wenn Sie es auf 20% des Durchgangs einstellen, bleibt es für einen Teil der Zeit still, wenn es unendlich wiederholt wird.,

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); }}

Wir müssen den Startpunkt für die Deckkraft hinzufügen und dann sowohl die Y-Position als auch die vertikale Skala an der 100% – Marke, dem Ende unserer Animation, transformieren. Das letzte, was wir tun müssen, ist, die Deckkraft fallen zu lassen, um unseren Kreis auszublenden.

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; }}

Zuletzt wenden wir die Animation zusammen mit der Eigenschaft ‚transform-origin‘ und der Eigenschaft will-change an, um eine Hardwarebeschleunigung zu ermöglichen. Die Animationseigenschaften sind ziemlich selbsterklärend., Die Cubic-Bezier-Timing-Funktion wird verwendet, um zuerst den Kreis zurück zu ziehen, bevor er auf den Boden unserer Mausform fällt; Dies verleiht der Animation ein spielerisches Gefühl.,

Animiertes Schreiben

Klicken Sie, um die Animation in Aktion zu sehen
  • Wie zu sehen auf: Garden Eight
  • Zeigen Sie den Code für die Pfade und text
  • Autor: Steven Roberts

Die Garden Eight Website verwendet eine gemeinsame Animationstechnik, wobei Text scheint geschrieben zu werden. Um den Effekt zu erzielen, wenden wir uns an SVG. Zunächst erstellen wir die SVG., Hier gibt es zwei Ansätze: Konvertieren Sie den Text in Pfade, um sie zu animieren, oder verwenden Sie SVG-Text. Beide Ansätze haben Ihre vor-und Nachteile.

Beginnen Sie mit der Erstellung unserer Keyframe-Animation. Die einzige Funktion, die wir ausführen müssen, besteht darin, das stroke-Dashoffset zu ändern. Jetzt haben wir unsere Animation erstellt und müssen die Werte anwenden, aus denen wir animieren möchten. Wir setzen den Strich-Dasharray, wodurch Lücken im Strich entstehen. Wir möchten unseren Strich so einstellen, dass er groß genug ist, um das gesamte Element abzudecken, und schließlich den Strich durch die Länge des Strichs ausgleichen.,

Die Magie passiert, wenn wir unsere animation. Indem wir den Offset animieren, bringen wir den Strich in Sicht und erzeugen einen Zeicheneffekt. Wir möchten, dass die Elemente einzeln zeichnen, mit einer gewissen Überlappung zwischen dem Ende des Zeichnens eines Elements und dem Beginn des Zeichnens des nächsten. Um dies zu erreichen, wenden wir uns Sass/SCSS und nth-of-type zu, um jeden Buchstaben um die Hälfte der Länge der Animation zu verzögern, multipliziert mit der Position dieses bestimmten Buchstabens.,

Fliegende Vögel

  • Wie zu sehen auf: Fournier Père et Fils
  • Zeigen Sie den Code für einen einzelnen Vogel oder die ganze Herde
  • Autor: Steven Roberts

Wir beginnen mit völlig geraden Vektorlinien, Zeichnung jeden Rahmen unserer Animation, Darstellung der Vogel in einem anderen Zustand des Fluges. Wir manipulieren dann die Vektorpunkte und runden die Linien und Kanten ab. Schließlich legen wir jeden Rahmen in eine gleich große Schachtel und legen sie nebeneinander. Exportieren Sie die Datei als SVG.

Das HTML-Setup ist wirklich einfach., Wir müssen nur jeden Vogel in einen Container wickeln, um mehrere Animationen anzuwenden – eine, um den Vogel fliegen zu lassen und die andere, um ihn über den Bildschirm zu bewegen.

<div class="bird-container"> <div class="bird"></div></div>

Wir wenden unsere bird SVG als Hintergrund auf unser bird div an und wählen die Größe aus, die jeder Frame haben soll. Wir verwenden die Breite, um die neue Hintergrundposition grob zu berechnen. Die SVG hat 10 Zellen, also multiplizieren wir unsere Breite mit 10 und ändern dann die Zahl leicht, bis sie korrekt aussieht.

CSS animation hat ein paar tricks, die Sie möglicherweise nicht bewusst sein., Wir können die Animation-Timing-Funktion verwenden, um das Bild in Schritten anzuzeigen – ähnlich wie beim Blättern durch Seiten in einem Notizbuch, um auf Animationen hinzuweisen.

Jetzt haben wir unseren Fliegenzyklus erstellt, unser Vogel flattert derzeit mit den Flügeln, geht aber nirgendwohin. Um sie über den Bildschirm zu bewegen, erstellen wir eine weitere Keyframe-Animation. Diese Animation bewegt den Vogel horizontal über den Bildschirm und ändert gleichzeitig die vertikale Position und den Maßstab, damit sich der Vogel realistischer darüber schlängeln kann.

Sobald wir unsere Animationen erstellt haben, müssen wir sie einfach anwenden., Wir können mehrere Kopien unseres Vogels erstellen und verschiedene Animationszeiten und Verzögerungen anwenden. 

.bird--one { animation-duration: 1s; animation-delay: -0.5s;}.bird--two { animation-duration: 0.9s; animation-delay: -0.75s;}

Cross my hamburger

  • Wie zu sehen auf: Better Brand Agency
  • Zeigen Sie den Code für die Spannweiten und SVG
  • Autor: Steven Roberts

Diese Animation wird im gesamten Web verwendet und verwandelt drei Zeilen in ein Kreuz-oder Schließsymbol., Bis vor kurzem wurde die Mehrheit der Implementierungen mit HTML – Elementen erreicht, aber SVG ist tatsächlich viel besser für diese Art von Animation geeignet-es ist nicht mehr erforderlich, Ihren Schaltflächencode mit mehreren Bereichen aufzublähen.

Aufgrund der animierbaren Natur und SVG und seines navigierbaren Doms ändert sich der Code zum Ausführen der Animation oder des Übergangs sehr wenig – die Technik ist dieselbe.

Zunächst erstellen wir vier Elemente, sei es Spannweiten innerhalb eines Div oder Pfade innerhalb eines SVG., Wenn wir Spans verwenden, müssen wir CSS verwenden, um sie innerhalb des div zu positionieren; Wenn wir SVG verwenden, ist dies bereits erledigt. Wir möchten die Zeilen 2 und 3 in der Mitte positionieren – eine über der anderen–, während wir die Zeilen 1 und 4 gleichmäßig über und unter Abstand halten, um sicherzustellen, dass der Transformationsursprung zentriert wird.

Wir werden uns darauf verlassen, zwei Eigenschaften zu wechseln: Deckkraft und Rotation. Zunächst möchten wir die Zeilen 1 und 4 ausblenden, auf die wir mit dem Selektor :nth-child abzielen können.,

.menu-icon.is-active {element-type}:nth-child(1),.menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

Es bleibt nur noch, die beiden mittleren Linien anzuvisieren und um 45 Grad in entgegengesetzte Richtungen zu drehen.

Kreise jagen

  • Wie zu sehen auf: Better Brand Agency
  • Sehen Sie sich den Code an
  • Autor: Steven Roberts

Das animierte Ladesymbol besteht aus vier Kreisen. Die Kreise haben keine Füllung, sondern abwechselnde Strichfarben.

In unserem CSS können wir einige grundlegende Eigenschaften für alle unsere Kreise festlegen und dann mit dem Selektor :nth-of-type ein anderes Strich-Dasharray auf jeden Kreis anwenden.,

Als nächstes müssen wir unsere Keyframe-Animation erstellen. Unsere Animation ist wirklich einfach: Wir müssen den Kreis nur um 360 Grad drehen. Wenn wir unsere Transformation an der 50% – Marke der Animation platzieren, dreht sich der Kreis auch wieder in seine ursprüngliche Position.

@keyframes preloader { 50% { transform: rotate(360deg); } }

Mit unserer erstellten Animation müssen wir sie jetzt nur noch auf unsere Kreise anwenden. Wir setzen den Animationsnamen; Dauer; Iterationszahl und Timing-Funktion. Der „Ease-in-out“ verleiht der Animation ein spielerischeres Gefühl.,

Im Moment haben wir unseren Lader, aber alle Elemente drehen sich gleichzeitig. Um dies zu beheben, werden wir einige Verzögerungen anwenden. Wir erstellen unsere Verzögerungen mit einer Sass for-Schleife.

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s;} }

Aufgrund der Verzögerungen animiert unser Kreis nun der Reihe nach und erzeugt die Illusion, dass sich die Kreise gegenseitig jagen. Das einzige Problem dabei ist, dass beim ersten Laden der Seite die Kreise statisch sind und sich nacheinander bewegen. Wir können den gleichen Offset-Effekt erzielen, aber die unerwünschte Pause in unserer Animation stoppen, indem wir einfach die Verzögerungen auf einen negativen Wert setzen.,

animation-delay: -#{$i * 0.15}s;

Next page: More CSS animation examples to explore