Venti animazioni SVG dal vivo con codice da copiare: tracciati che si disegnano, loader, transizioni di icone, barre di grafici che crescono e morphing dei path, più CSS vs SMIL vs GSAP e SVG vs Lottie.
Un'animazione SVG sposta o ridisegna forme vettoriali con CSS, SMIL o JavaScript. I keyframe CSS gestiscono transform, opacity e il trucco del tracciato con stroke-dasharray più stroke-dashoffset. I tag SMIL come <animate> possono trasformare i path e seguire percorsi di movimento senza script. Librerie come GSAP aggiungono timeline e controllo dello scroll. Lottie è adatto alle animazioni After Effects create dai designer.
Quale tecnica per quale effetto
Ogni animazione in questa pagina gira dal vivo a partire dal codice accanto, in un frame con gli script disattivati, quindi ciò che copi è esattamente ciò che funziona senza JavaScript. Ognuna si ferma anche per i visitatori che chiedono al sistema movimento ridotto. In alto, un generatore di tracciati scrive il trucco dello stroke per qualsiasi path che incolli.
Dai allo stroke un tratto lungo quanto il path con stroke-dasharray, spingilo fuori vista con uno stroke-dashoffset uguale, poi anima l'offset fino a 0. Il tratto scivola in posizione e la linea sembra disegnarsi da sola. pathLength="1" ti permette di usare 1 per entrambi i valori.
No. Chrome ha annunciato un piano per deprecarlo nel 2015 e poi lo ha sospeso. Gli elementi SMIL come animate, animateTransform e animateMotion funzionano in tutti i principali browser attuali e fanno parte della specifica SVG.
In parte. La proprietà CSS d accetta valori path() e può essere animata nei browser Chromium e in Firefox, ma Safari non la supportava al momento della stesura, quindi controlla caniuse. Entrambi i path devono avere lo stesso numero e tipo di comandi. SMIL animate sull'attributo d funziona in modo più diffuso.
Usa SVG semplice con CSS per icone, loader e illustrazioni semplici che puoi descrivere in codice. Usa Lottie quando un motion designer crea un personaggio o una scena complessa in After Effects e vuoi riprodurla fedelmente. Lottie richiede una libreria player; l'SVG semplice no.
Racchiudi le animazioni CSS in una media query prefers-reduced-motion oppure disattivale al suo interno. Il CSS non può mettere in pausa SMIL, quindi mostra una versione statica della grafica in quella media query, o chiama pauseAnimations() sull'elemento svg da uno script.
Tutte e venti funzionano senza JavaScript e includono una regola per il movimento ridotto. Puoi modificarle direttamente.
Il classico trucco dello stroke con pathLength=1, così i valori del tratteggio non dipendono dalla lunghezza reale.
Un path più lungo disegnato lentamente con un easing lineare sembra una penna in movimento.
Un cerchio con un tratteggio parziale ruota; transform-box mantiene la rotazione centrata.
Valori di animation-delay sfalsati trasformano un unico set di keyframe in un'onda.
Scala e dissolvenza insieme per un indicatore radar o live.
Ogni barra scala sull'asse Y dalla propria base con una durata diversa.
Le barre crescono una volta al caricamento. Usare forwards mantiene lo stato finale, e la regola per il movimento ridotto mostra semplicemente il grafico completo.
La stessa idea del tratteggio su un cerchio. Ruotalo di -90 gradi così parte dall'alto.
Passa il mouse o porta il focus sul pulsante. Ogni linea si sposta e ruota con una transition, senza bisogno di keyframe.
Due rapidi passi di scala e poi una pausa, tutto in un unico elenco di keyframe.
Funziona in Chromium e Firefox. Dove d non è supportata la forma resta un quadrato. Entrambi i path usano gli stessi comandi nello stesso ordine.
SMIL cambia l'attributo d stesso, che ha un supporto più ampio della proprietà CSS d. Con il movimento ridotto viene mostrata la copia statica.
rotate=auto orienta la forma nella direzione di marcia.
I valori di rotate prendono il punto centrale come secondo e terzo numero.
SMIL anima i colori degli stop del gradiente, cosa che possono fare anche i keyframe CSS su stop-color.
Un path largo il doppio della vista scorre a sinistra esattamente di un periodo, così il loop non ha giunture.
Rotazione dalla sommità della campanella, attivata da hover o focus da tastiera.
Uno stroke tratteggiato con offset animato, l'aspetto di un riquadro di selezione negli editor di immagini.
Brevi trattini su una linea curva si muovono di continuo per suggerire una direzione.
Lo schiacciamento all'impatto rende il peso. transform-origin in basso tiene la palla sul pavimento mentre si schiaccia.
Tre modi per animare gli SVG
Solo codice, perché i frame delle demo hanno gli script disattivati. GSAP è gratuito con una sua licenza, che non è MIT, quindi leggi i termini prima di andare in produzione.
Stella
Onda
Casa
Riproduci
Il tuo sistema chiede movimento ridotto, quindi il disegno viene mostrato completo. Premi Riproduci per vederlo una volta.
Dati del path (attributo d)
Durata: {n}s
Spessore dello stroke: {n}
Easing
Colore
SVG e CSS
Copia codice
Inizia gratis · Nessuna carta di credito richiesta