30 tolle SVG-Animation für Ihre Inspiration
Designer verwendeten Animationen in HTML-Elementen mit CSS. Aufgrund der Einschränkungen von HTML-Elementen bei der Erstellung von Mustern, Formen und anderen Elementen wird natürlich auf SVG zurückgegriffen, das interessantere Funktionen bietet.
Bei der Verwendung von SVG genießen wir eine gute Browserunterstützung für SVG-Animationen und wir haben mehr Möglichkeiten, neue Animationen zu erstellen. Sie können sowohl die integrierte SVG-Animationsfunktionalität als auch die CSS3-Animation verwenden (beachten Sie, dass nicht alles von CSS ausgeführt werden kann, sodass JavaScript weiterhin benötigt wird). Eine andere Möglichkeit ist die Verwendung von JavaScript-Engines wie GSAP oder Snap. JS ist eine bewährte Methode zum Erstellen von Animationen.
Hier habe ich ein paar tolle animierte SVGs zusammengestellt. Einige verwenden SVG-Animationen, andere verwenden die CSS-Transformation für grundlegende Animationen und die übrigen verwenden die Hilfe von JavaScript.
Grenzanimation von Sean McCaffery
Nur mit CSS erstellt, bildet sich ein Rand nahtlos um den Text, wenn Sie den Mauszeiger darüber bewegen “SCHWEBEN” Anweisung.
Elastische SVG-Sidebar von Nikolay Talanov
Die Seitenleiste wird elastisch, wenn Sie versuchen, sie von der Seite wegzuziehen. Ein schönes Konzept, das auf einer von Material Design inspirierten Seitenleiste angewendet wurde.
Ziehen Sie nach unten, um sich von Nikolay Talanov zu aktualisieren
Die meisten Seiten erlauben es Ihnen “runterziehen” auf der Seite zum Aktualisieren. Mit dieser Animation, wenn Sie “Veröffentlichung” Auf der Seite ändert sich das Send-Symbol in ein Plane-Symbol und wird in die Luft abgegeben.
Animierter Farbverlauf auf Text von Patrick Young
Hier ist ein subtiler, aber nicht einfach zu verfassender Textverlauf, den Typografie-Liebhaber lieben werden.
Herzanimation von Nikolay Talanov
Diese Animation zeigt Ihnen, wie aus zwei Kreisen und einem Quadrat ein Herzsymbol hergestellt wird. Die Transformation erfolgt mit einer CSS-Animation.
Let's Travel von jjperezaguinaga
Eine Animation, die Städte und beliebte Touristenziele der Welt veranschaulicht. Die Verschiebungen und Umwandlungen werden mithilfe einer CSS-Animation erstellt.
Menüwechsel-Animation von Tamino Martinius
Eine verwandelnde Animation der Hamburger-Ikone, die sich in eine Kreuz-Ikone verwandelt. Sehen Sie, wie glatt der Übergang zwischen den beiden Objekten ist.
Animierte Infografik von Sdras
Eine fantastische Animation von Sarah Drasner, unterstützt von GSAP Timeline. Es ist eine Infografik mit Animationen zum Leben erweckt worden. Verwenden Sie den Schieberegler, um von einem beliebigen Punkt auf die Bilder zuzugreifen.
Rain-Bros mögen JS von Cihadturhan nicht
Eine einzigartige und lustige Loop-Animation, die den Lauf der Charaktere darstellt. Die Bewegung der Objekte in dieser Demo ist eine Kombination aus SVG- und CSS3-Animation. Die Beine verwenden SVG-Animationen, während andere Teile CSS3-Animationen verwenden.
Uhr von Mohamad Mohebifar
Beobachten Sie die sanfte Bewegung des Sekundenzeigers in dieser Uhr mit der aktuellen Uhrzeit. Die Animation wird vollständig mit der SVG-Animationsfunktion erstellt.
Rainbow Rocket Man von Chris Gannon
Ein Astronaut, der mit seinem regenbogengetriebenen Jet Pack (?) Ins All schießt. Schöne Animation mit dem GSAP Tweenmax-Plugin.
Animierte Ikone von Luigi De Rosa
Über diese animierten SVG-Symbole erfahren Sie jedoch, was sie tun können. Der Ersteller hat dies mit GSAP gemacht.
Flacher Arbeitsbereich von Hoàng Nhật
Die Animation veranschaulicht einen Arbeitsbereich im flachen Design. Der Ersteller verwendete GSAP, um diese fantastische Animation einer Workstation zu erstellen.
Die anklickbare, animierte Ikone von Hamish Williams
Dies ist eine coole Animation, die die Bibliothek snap.svg verwendet. Klicken Sie hier, um die E-Mail anzuzeigen “geschickt”.
Tauchen von Chris Gannon
Haben Sie jemals Steine auf der Oberfläche eines Sees übersprungen? Hier ist eine einfache SVG-Pfadanimation, die dies veranschaulicht, jedoch ohne Steine und ohne See.
Bewegung für das Web von LegoMushroom
Es hat Animationen, eine schöne Melodie, einen super coolen Einstieg für den Text. Was kann man nicht mögen? Dies wird mit mo.js, einer JavaScript-Bibliothek für Bewegungsgrafik, erstellt.
Animierte Schreibschrift von Lee Porter
Neben der Verwendung von SVG zum Zeichnen von Pfadenanimationen für eine Form können Sie sie auch für die Typografie verwenden, wie es der Ersteller gemacht hat. Der Unschärfe-Effekt macht es noch beeindruckender.
Gooey-Menü von Lucas Bebber
Viel Spaß mit dem Gooey-Effekt in diesem Design, das mithilfe des SVG-Filters und durch Hinzufügen von CSS-Animationen erstellt wird. Das Ergebnis ist realistisch und sehr cool, und Sie können mit vier verschiedenen Versionen spielen.
Neuer Kuchen von Marco Barría
Wie man einen mehrschichtigen Geburtstagskuchen mit SVG- und CSS-Animation erstellt.
Vielen Dank von Rachel Smith
Sehen Sie sich einfach diese tolle Animation einer einfachen Dankesnotiz an. Es wird mit der SVG- und GSAP-TweenMax-Bibliothek erstellt.
CSS vs SVG von Mario Sanchez Maselli
Sehen wir uns den Vergleich über CSS- und SVG-Animationen an. Sehen Sie den Unterschied?
Walking Dog von Mark Nelson
Eine andere Möglichkeit, SVG zu animieren, besteht darin, Sprites-Bilder zu verwenden, wie es der Ersteller getan hat.
Sanduhrlader von Leela
Eine kreative Arbeit mit reiner SVG-Animation (SMIL); kein CSS oder JS, um hier Dinge zu animieren.
Logo-Animation von Adem ilter
Hier ist ein schönes animiertes Logo mit Inline-SVG-Animation. Es wurde kein CSS oder JS verwendet, damit alles funktioniert.
Statistikanimation von Jonas Badalic
Eine schöne Statistik mit SVG-Animation, die von der Snap.SVG-Bibliothek unterstützt wird.
Ouroboros von Noel Delgado
Ein erstaunlicher SVG-Animationspfad. Zuerst zeichnete der Ersteller eine Pfadroute in SVG, bevor er mit tween.js eine Animation hinzufügte.
Kreative Gooey-Effekte von Lucas Bebber
Hier sind sieben kreative Verwendungsmöglichkeiten des SVG-Filters, um einen klebrigen Effekt zu erzielen. Der Musikvisualisierer ist mein Favorit, die Animation sieht sehr schön aus.
Wirf die Kuh von Sarah Drasner
Dies ist eine SVG-Animation, die von TweenMax unterstützt wird, aber nur zum Spaß gemacht wurde. Halte und zieh die Kuh um den Planeten. Es wird sich im "Orbit" drehen.
Animiertes Logo von Ali
Animation könnte eine nette kleine Ergänzung für ein sprudelndes Bierlogo sein. Die schönen kleinen Schwimmblasen sind rein mit der von SVG entwickelten Animationssyntax aufgebaut.
