Zwanzig live laufende SVG-Animationen mit Code zum Kopieren: Linienzeichnung, Loader, Icon-Übergänge, wachsende Diagrammbalken und Path-Morphing, dazu CSS vs. SMIL vs. GSAP und SVG vs. Lottie.
SVG-Animation bewegt oder zeichnet Vektorformen mit CSS, SMIL oder JavaScript neu. CSS-Keyframes übernehmen Transforms, Opacity und den Linienzeichnungs-Trick mit stroke-dasharray plus stroke-dashoffset. SMIL-Tags wie <animate> können Pfade morphen und Bewegungspfaden folgen, ganz ohne Skripte. Bibliotheken wie GSAP ergänzen Timelines und Scroll-Steuerung. Lottie eignet sich für von Designern erstellte After-Effects-Animationen.
Welche Technik für welchen Effekt
Jede Animation auf dieser Seite läuft live aus dem Code daneben, in einem Frame mit deaktivierten Skripten. Was du kopierst, funktioniert also genau so ohne JavaScript. Jede stoppt außerdem für Besucher, die in ihrem System reduzierte Bewegung eingestellt haben. Ein Linienzeichnungs-Builder oben schreibt den Stroke-Trick für jeden Pfad, den du einfügst.
Gib dem Stroke mit stroke-dasharray einen Strich, der so lang ist wie der Pfad, schiebe ihn mit einem gleich großen stroke-dashoffset aus dem Sichtbereich und animiere den Offset dann auf 0. Der Strich gleitet an seinen Platz und die Linie scheint sich selbst zu zeichnen. Mit pathLength="1" kannst du für beide Werte 1 verwenden.
Nein. Chrome kündigte 2015 an, es abzuschaffen, und setzte diesen Plan dann aus. SMIL-Elemente wie animate, animateTransform und animateMotion funktionieren in allen aktuellen großen Browsern und sind Teil der SVG-Spezifikation.
Teilweise. Die CSS-Eigenschaft d akzeptiert path()-Werte und lässt sich in Chromium-Browsern und Firefox animieren, aber Safari unterstützte sie zum Zeitpunkt des Schreibens nicht, prüfe also caniuse. Beide Pfade müssen gleich viele Befehle desselben Typs haben. SMIL animate auf dem d-Attribut funktioniert breiter.
Nutze reines SVG mit CSS für Icons, Loader und einfache Illustrationen, die du in Code beschreiben kannst. Nutze Lottie, wenn ein Motion Designer eine komplexe Figur oder Szene in After Effects baut und du sie originalgetreu abspielen willst. Lottie braucht eine Player-Bibliothek, reines SVG nicht.
Packe CSS-Animationen in eine prefers-reduced-motion-Media-Query oder schalte sie darin ab. CSS kann SMIL nicht pausieren. Zeige in dieser Media-Query also eine statische Version der Grafik oder rufe per Skript pauseAnimations() auf dem svg-Element auf.
Alle zwanzig laufen ohne JavaScript und enthalten eine Regel für reduzierte Bewegung. Bearbeite jede direkt an Ort und Stelle.
Der klassische Stroke-Trick mit pathLength=1, sodass die Dash-Werte nicht von der echten Länge abhängen.
Ein längerer Pfad, langsam mit linearem Easing gezeichnet, wirkt wie ein sich bewegender Stift.
Ein Kreis mit teilweisem Strich dreht sich; transform-box hält die Drehung zentriert.
Versetzte animation-delay-Werte machen aus einem Keyframe-Satz eine Welle.
Skalieren und Ausblenden zusammen für einen Radar- oder Live-Indikator.
Jeder Balken skaliert auf der Y-Achse von seiner Basis aus, mit eigener Dauer.
Die Balken wachsen einmal beim Laden. forwards behält den Endzustand, und die Regel für reduzierte Bewegung zeigt einfach das fertige Diagramm.
Dieselbe Dash-Idee auf einem Kreis. Drehe ihn um -90 Grad, damit er oben beginnt.
Fahre mit der Maus über den Button oder fokussiere ihn. Jede Linie bewegt und dreht sich mit einer Transition, ganz ohne Keyframes.
Zwei schnelle Skalierungsschritte, dann eine Pause, alles in einer Keyframe-Liste.
Funktioniert in Chromium und Firefox. Wo d nicht unterstützt wird, bleibt die Form ein Quadrat. Beide Pfade nutzen dieselben Befehle in derselben Reihenfolge.
SMIL ändert das d-Attribut selbst, das breiter unterstützt wird als die CSS-Eigenschaft d. Bei reduzierter Bewegung erscheint die statische Kopie.
rotate=auto dreht die Form in die Bewegungsrichtung.
Die rotate-Werte nehmen den Mittelpunkt als zweite und dritte Zahl.
SMIL animiert die Farben der Verlaufs-Stops, was auch CSS-Keyframes auf stop-color können.
Ein Pfad, doppelt so breit wie die Ansicht, gleitet um genau eine Periode nach links, daher hat die Schleife keine Naht.
Drehung von der Oberseite der Glocke aus, ausgelöst durch Hover oder Tastaturfokus.
Ein gestrichelter Stroke mit animiertem Offset, der Look eines Auswahlrahmens in Bildbearbeitungsprogrammen.
Kurze Striche auf einer gebogenen Linie bewegen sich fortlaufend und deuten eine Richtung an.
Die Stauchung beim Aufprall vermittelt Gewicht. transform-origin unten hält den Ball beim Stauchen auf dem Boden.
Drei Wege, SVG zu animieren
Nur Code, da in den Demo-Frames Skripte deaktiviert sind. GSAP ist unter einer eigenen Lizenz kostenlos nutzbar, die nicht MIT ist. Lies also die Bedingungen, bevor du es auslieferst.
Stern
Welle
Haus
Erneut abspielen
Dein System verlangt reduzierte Bewegung, daher wird die Zeichnung fertig angezeigt. Drücke Erneut abspielen, um sie einmal abzuspielen.
Pfaddaten (d-Attribut)
Dauer: {n}s
Strichstärke: {n}
Easing
Farbe
SVG und CSS
Code kopieren
Kostenlos starten · Keine Kreditkarte nötig