Twintig live SVG-animaties met code om te kopiëren: lijntekeningen, loaders, icoonovergangen, groeiende grafiekstaven en path morphing, plus CSS vs SMIL vs GSAP en SVG vs Lottie.
SVG-animatie verplaatst of hertekent vectorvormen met CSS, SMIL of JavaScript. CSS-keyframes regelen transforms, opacity en de lijnteken-truc met stroke-dasharray plus stroke-dashoffset. SMIL-tags zoals <animate> kunnen paths morphen en bewegingspaden volgen zonder scripts. Bibliotheken zoals GSAP voegen tijdlijnen en scrollbesturing toe. Lottie past bij After Effects-animaties die een ontwerper heeft gemaakt.
Welke techniek voor welk effect
Elke animatie op deze pagina draait live vanuit de code ernaast, in een frame met scripts uitgeschakeld, dus wat u kopieert werkt precies zo zonder JavaScript. Elke animatie stopt ook voor bezoekers die hun systeem om minder beweging vragen. Een lijntekenbouwer bovenaan schrijft de stroke-truc voor elk path dat u plakt.
Geef de lijn met stroke-dasharray een streep zo lang als het path, duw die met een even grote stroke-dashoffset uit beeld en animeer de offset dan naar 0. De streep schuift op zijn plek en de lijn lijkt zichzelf te tekenen. Met pathLength="1" gebruikt u 1 voor beide waarden.
Nee. Chrome kondigde in 2015 een plan aan om het af te schaffen en zette dat plan daarna stop. SMIL-elementen zoals animate, animateTransform en animateMotion werken in alle huidige grote browsers en maken deel uit van de SVG-specificatie.
Gedeeltelijk. De CSS-eigenschap d accepteert path()-waarden en kan worden geanimeerd in Chromium-browsers en Firefox, maar Safari ondersteunde het op het moment van schrijven niet, dus controleer caniuse. Beide paths moeten hetzelfde aantal en type commando's hebben. SMIL animate op het d-attribuut werkt breder.
Gebruik gewone SVG met CSS voor iconen, loaders en eenvoudige illustraties die u in code kunt beschrijven. Gebruik Lottie wanneer een motion designer een complex personage of een complexe scène in After Effects bouwt en u die getrouw wilt afspelen. Lottie heeft een player-bibliotheek nodig; gewone SVG niet.
Zet CSS-animaties in een prefers-reduced-motion media query of schakel ze daarbinnen uit. CSS kan SMIL niet pauzeren, dus toon in die media query een stilstaande versie van de afbeelding, of roep vanuit een script pauseAnimations() aan op het svg-element.
Alle twintig draaien zonder JavaScript en hebben een regel voor minder beweging. Bewerk ze ter plekke.
De klassieke stroke-truc met pathLength=1, zodat de dash-waarden niet van de echte lengte afhangen.
Een langer path dat langzaam wordt getekend met een lineaire easing leest als een bewegende pen.
Een cirkel met een gedeeltelijke streep draait; transform-box houdt de draaiing gecentreerd.
Verspringende animation-delay-waarden maken van één set keyframes een golf.
Schalen en vervagen tegelijk voor een radar of live-indicator.
Elke balk schaalt op de Y-as vanaf de basis met een eigen duur.
Staven groeien één keer bij het laden. Met forwards blijft de eindtoestand staan, en de regel voor minder beweging toont gewoon de afgeronde grafiek.
Hetzelfde dash-idee op een cirkel. Draai hem -90 graden zodat hij bovenaan begint.
Beweeg over de knop of geef hem focus. Elke lijn verschuift en draait met een transition, keyframes zijn niet nodig.
Twee snelle schaalstappen en dan rust, alles in één keyframe-lijst.
Werkt in Chromium en Firefox. Waar d niet wordt ondersteund blijft de vorm een vierkant. Beide paths gebruiken dezelfde commando's in dezelfde volgorde.
SMIL wijzigt het d-attribuut zelf, wat bredere ondersteuning heeft dan de CSS-eigenschap d. Bij minder beweging verschijnt de stilstaande kopie.
rotate=auto draait de vorm in de bewegingsrichting.
De rotate-waarden nemen het middelpunt als tweede en derde getal.
SMIL animeert de kleuren van de verloopstops, iets wat CSS-keyframes op stop-color ook kunnen.
Een path dat twee keer zo breed is als het beeld schuift precies één periode naar links, zodat de lus geen naad heeft.
Rotatie vanaf de bovenkant van de bel, gestart door hover of toetsenbordfocus.
Een gestreepte lijn met een geanimeerde offset, de look van een selectiekader in beeldbewerkers.
Korte streepjes op een gebogen lijn bewegen doorlopend om richting te suggereren.
Indeuken bij de inslag verkoopt het gewicht. Met transform-origin onderaan blijft de bal op de vloer terwijl hij indeukt.
Drie manieren om SVG te animeren
Alleen code, want in de demoframes staan scripts uit. GSAP is gratis te gebruiken onder een eigen licentie, die geen MIT is, dus lees de voorwaarden voordat u live gaat.
Ster
Golf
Huis
Opnieuw afspelen
Uw systeem vraagt om minder beweging, dus de tekening wordt voltooid getoond. Druk op Opnieuw afspelen om hem één keer af te spelen.
Path-gegevens (d-attribuut)
Duur: {n}s
Lijndikte: {n}
Easing
Kleur
SVG en CSS
Code kopiëren
Gratis beginnen · Geen creditcard nodig