25 coole CSS-Animationsbeispiele zum Neuerstellen

Seite 2 von 2: CSS-Animationseffekte

13. Glitch-Text

Glitchy-Effekte sind ideal, um einer Website ein anarchisches oder verzweifeltes Aussehen zu verleihen. Sie können CSS-Keyframes verwenden, um diese Art von Animation zu erstellen. Der Vorgang ähnelt dem Arbeiten mit Animationssoftware, außer dass Keyframes in CSS als Prozentsätze für die Zeitachse der Animation im Code geschrieben werden. Im Dieses Glitch-Text-Tutorial , Designer und Entwickler Mark Shufflebottom geht durch den Prozess. Sie werden auch verwenden CSS-Raster um Elemente auf dem Bildschirm zu positionieren.

14. Abseits der ausgetretenen Pfade

  • Autor: Adam Kuhn

SVG-bezogene Eigenschaften werden in CSS immer benutzerfreundlicher. Zwei der einzigartigsten animierbaren Eigenschaften sind Pfade: Versatzpfad und Clip-Pfad . Zum Beispiel mit Versatzpfad Wir können einen SVG-Pfad definieren (und sogar von Hand zeichnen) und unseren Versatzabstand anpassen (oder im Fall von älteren Browsern). Bewegungsversatz ) damit sich unsere Elemente auf unserem definierten Weg bewegen können.

Im Folgenden definieren wir einen SVG-Pfad und weisen unser Element an, sich von Anfang bis Ende zu bewegen.



animation:followPath 5s ease-in-out infinite; offset-path: path('M 40 0 C 75 170 160 140 200 280 Q 220 400 340 400 Q 420 380 480 540'); motion-path: path(“M 40 0 C 75 170 160 140 200 280 Q 220 400 340 400 Q 420 380 480 540”); @keyframes followPath{ from{ offset-distance:0%; motion-offset:0%;} to{ offset-distance:100%; motion-offset:100%;}}

Denken Sie beim Zeichnen Ihres Pfads daran, dass er sich in das Ansichtsfeld der SVG einfügt und alle numerischen Werte in Pixel übersetzt werden. Dies kann zu reaktionsschnellen Herausforderungen führen Versatzpfad Animationen akzeptieren keine relativen Einheiten.

Die andere wirklich nette animierbare Pfadeigenschaft ist der Clip-Pfad. Das Besondere an der Animation von Clip-Pfaden ist die Möglichkeit, die Positionierung von Pfadpunkten reibungslos zu ändern. Zum Beispiel können wir übergehen Clip-Pfad: Polygon (0 0, 100% 0, 100% 100%, 0% 100%) zu Clip-Pfad: Polygon (50% 0%, 50% 0%, 100% 100%, 0% 100%); und ein Quadrat reibungslos in ein Dreieck überführen - eine Leistung, die mit CSS sonst kaum möglich wäre.

Wichtiger Hinweis zur Animation Clip-Pfad : Die Anzahl der Punkte auf dem Pfad muss sowohl für die Anfangs- als auch für die Endform gleich bleiben. Für eine einfache Möglichkeit zu visualisieren, wie der Clip-Pfad das Auschecken animiert Bennett Feelys Clippy .

Schauen Sie sich dieses Beispiel für den Offset-Pfad Ghibli Slider an:

Und Clip-Pfad Beispiel Erstes Licht:

15. Fallender Schnee

Der Schnee wird mit einem SVG erstellt und die Technik ist der Art und Weise, wie wir die Blasen zuvor erstellt haben, sehr ähnlich. Zu Beginn erstellen wir zwei Kreisebenen in einem SVG und animieren diese beiden Ebenen, indem wir den Y-Wert mit einer Keyframe-Animation übersetzen.

Wir wenden die Animation auf jede Ebene anstatt auf einzelne Elemente an und verwenden dieselbe Animation für beide Ebenen wieder. Indem wir ihnen einfach unterschiedliche Dauern geben, können wir unserer Szene etwas Tiefe verleihen.

16. Hintergrund verschieben

Die Website A Violent Act verwendet Maskierung und subtile Bewegungen, um die Aufmerksamkeit des Benutzers zu erregen. Der Großteil der Arbeit hier liegt in der Einrichtung und Erstellung der SVG.

17. Bunte Übergänge

Die DaInk-Website verwendet eine wirklich effektive Technik für den Übergang zwischen Seiten. Der Übergang ist einfach und besteht aus einer SVG-Datei, die mehrere übereinander angeordnete Rechtecke unterschiedlicher Größe in verschiedenen Farben enthält.

Die Animation besteht aus der Transformation der X-Position um die Breite des SVG. Dann mit n-ter Typ Wir wenden Verzögerungen an, die jeweils um 75 ms vom letzten versetzt werden, um einen reibungslosen Übergang zu erzielen.

18. Zufällig erscheinende Buchstaben

Jam3 verwendete JavaScript und CSS, um ein animiertes Inhalts-Overlay für einen Vollbild-Videohintergrund auf seiner Website Nuclear Dissent zu erstellen.

Um diese CSS-Animation zu kopieren, müssen Sie zunächst die Struktur des HTML-Dokuments initiieren. Dies besteht aus dem Dokumentencontainer, in dem die Kopf- und Körperteile gespeichert sind. Während der Kopfabschnitt zum Laden der externen CSS- und JavaScript-Ressourcen verwendet wird, enthält der Text den sichtbaren Seiteninhalt, der im nächsten Schritt erstellt wird.

Der Inhalt der Vordergrundseite wird innerhalb der platziert Main Behälter, um den Vorteil einer einfachen Kontrolle des Inhaltsflusses zu bieten. Das Textelement hat die Overlay Klasse angewendet, damit sie von JavaScript und CSS zum Anwenden der Textanimation referenziert werden kann. Bei mehreren Elementen kann die Animation mithilfe von angewendet werden Overlay Klasse.

This is a story all about how...

Der letzte Teil des HTML-Codes besteht darin, das Hintergrundvideoelement zu definieren. Nicht alle Browser können jeden Videostandard unterstützen, daher müssen unterschiedliche Quellen angegeben werden. Der Browser zeigt die erste Quelle an, die er unterstützen kann. Beachten Sie, wie das Videoelement das hat automatisches Abspielen , stumm geschaltet und Schleife Attribute werden so angewendet, dass sie automatisch ohne Ton abgespielt und wiederholt werden.

Erstellen Sie eine neue Datei mit dem Namen styles.css . Der erste Schritt in dieser Datei besteht darin, die Eigenschaften von zu definieren Main Inhaltscontainer. Die Standardeinstellungen für Schriftart und Farbe werden angewendet, damit untergeordnete Inhalte geerbt werden. Auto-Werte werden auf die Seitenränder angewendet, sodass untergeordneter Inhalt zentral ausgerichtet angezeigt wird.

main { font-family: Helvetica, sans-serif; color: #fff; padding: 2em; width: 75%; min-height: 100vh; margin: 0 auto 0 auto; }

Das Hintergrundelement erfordert ein bestimmtes Styling, damit der Effekt funktioniert. Erstens ist eine feste Positionierung wichtig, um sicherzustellen, dass sie in derselben Position bleibt, wenn der Benutzer die Seite scrollt. Zweitens muss ein Negativ verwendet werden Z-Index das garantiert seine Position unter dem Inhalt der Hauptseite. Verwandeln und Größe werden auch verwendet, um die Größe und Position des Elements so einzustellen, dass es das ganzseitige Fenster abdeckt.

video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: -9999; transform: translateX(-50%) translateY(-50%); background: #000; }

Das Overlay Das Element wird von JavaScript bearbeitet, um jeden Buchstaben seines Textinhalts zu teilen, der von einem Span-Tag umbrochen werden soll. Dadurch können einzelne Buchstaben über CSS animiert werden. Erstens die Standardeinstellungen für die Spanne Buchstaben haben eine relative Positionierung, unsichtbare Deckkraft und eine angewendete animateOverlay Animation. Zweitens wird eine Verzögerung auf ihre Animation angewendet, die auf der Positionierung des Kindes basiert.

.overlay span{ position: relative; opacity: 0; top: 1em; animation: animateOverlay 1s ease-in- out forwards; } .overlay span:nth-child(4n) { animation-delay: 0s; } .overlay span:nth-child(4n+1) { animation- delay: 1s; } .overlay span:nth-child(4n+3) { animation- delay: 2s; } .overlay span:nth-child(4n+2) { animation- delay: 3s; }

Die Animation, die auf jedes Span-Element angewendet wird, besteht aus nur einem Frame, auf den die Elemente animiert werden. Dadurch wird ihre Deckkraft so eingestellt, dass sie vollständig sichtbar wird, und ihre vertikale Position wird so eingestellt, dass sie in Richtung ihrer Standardposition für den Textfluss animiert wird. Beachten Sie, wie in Schritt 6 jedes Span-Element so eingestellt wird, dass es von 1em nach unten gedrückt wird.

@keyframes animateOverlay { to { opacity: 1; top: 0; } }

Erstellen Sie eine neue Datei mit dem Namen code.js . In diesem ersten Schritt werden alle Elemente mithilfe von gesucht Overlay Klasse - davon a zum Schleife wird verwendet, um den Code später anzuwenden. Diese Elemente sind erst verfügbar, nachdem die Seite geladen wurde. Sie müssen daher in einem Ereignis-Listener im Browserfenster platziert werden, der nach Abschluss des Ladevorgangs ausgelöst wird.

indow.addEventListener('load', function(){ var nodes = document. querySelectorAll('.overlay'); for(var i=0; i

Für jedes hier gefundene Element muss der HTML-Inhalt neu definiert werden, damit sich jeder Buchstabe in einem span-Element befindet. Dies wird erreicht, indem der Klartext mit gelesen wird innerText und dann mit einer Sekunde zum Schleife, um jeden Buchstaben einzeln zur neuen Version des HTML-Codes hinzuzufügen - vollständig innerhalb seines span-Tags. Nachdem jeder Buchstabe gelesen wurde, wird der übergeordnete Knoten innerHTML wird mit dem neuen HTML aktualisiert.

var words = nodes[i].innerText; var html = ''; for(var i2=0; i2' } nodes[i].innerHTML = html;

19. Pulsierende Kreise

Die auf der Peek-a-Beat-Website verwendete Pulsanimation ist einfach, aber effektiv und nicht schwer zu reproduzieren. Es besteht aus drei Kreisen innerhalb einer SVG - wir animieren einfach deren Maßstab und Deckkraft.

20. Erweitern Sie das Highlight

Dies ist eine sehr einfache und dennoch sehr effektive Technik. Der Übergang erfolgt mit dem ::Vor Pseudoelement. Zunächst wird das Pseudoelement unten platziert, während es sich über die gesamte Breite erstreckt, jedoch nur wenige Pixel hoch ist.

Wenn mit dem Element interagiert wird, werden sowohl die Breite als auch die Höhe des Pseudoelements auf 105% der Größe des übergeordneten Elements (die Änderung ist vertikal viel dramatischer) sowie die Farbe des Texts geändert.

21. Erhöhter Titel

Ensemble Correspondances verwendet einfache Animationen, um Bewegungen in der Musik zu vermitteln. Das Design repräsentiert lose Noten.

22. Symbol für das sich drehende Menü

Die animierte Menüschaltfläche wird mit einem SVG erstellt. Die Animation erfolgt, wenn der Benutzer mit der Menüschaltfläche interagiert. Es finden zwei Übergänge statt: Die kreisförmige Gruppe um das Menü dreht sich um 360 Grad und das Menüsymbol in der Mitte ändert die Farbe.

Der komplizierteste Teil ist die Timing-Funktion. Nutzen kubischer Bezier Um die vollständige Kontrolle zu erlangen, können wir die Animation langsam starten, durch den Mittelteil rennen und am Ende wieder verlangsamen.

23. Von der Mitte aus unterstreichen

CSS-Animationen: von der Mitte unterstreichen

Klicken Sie hier, um die Animation in Aktion zu sehen

Die Animation besteht aus der Positionierung der ::nach dem Pseudoelement nach unten und skaliert es dann, wenn mit der Schaltfläche interagiert wird.

24. Ecken erweitern

Die Website des Princess Alexandra Auditorium bietet eine visuelle Möglichkeit, die Kategorien ihrer Shows anzuzeigen. Jede der Ausstellungskarten hat eine dreieckige Ecke in einer Farbe, die die Kategorie darstellt. Beim Hover wird dann der Name der Kategorie angezeigt.

Der Effekt wird mit dem erreicht ::Vor und ::nach dem Pseudoelemente, die die Größe des Dreiecks ändern und den Namen einblenden, wenn mit dem Element interagiert wird.

25. Schiebepfeil

Die Greenwich Library hat einen wirklich interessanten Übergang auf ihren Knöpfen. Bei der Interaktion mit der Schaltfläche passieren zwei Dinge: Der Textteil der Schaltfläche wird abgedeckt und der Pfeil wird dann von der rechten Seite der Schaltfläche animiert und von links wieder eingefügt.

Der Farbübergang erfolgt mit der Übergangseigenschaft und dem Pfeil mithilfe einer einfachen Keyframe-Animation. Sowohl der Übergang als auch die Animation verwenden dieselbe Dauer, um die Bewegungen zu synchronisieren.

Weiterlesen:

  • 1
  • zwei

Aktuelle Seite: CSS-Animationseffekte

Vorherige Seite CSS-Animations-Tutorials