Vingt animations SVG en direct avec du code à copier : tracé de ligne, loaders, transitions d'icônes, barres de graphique qui grandissent et morphing de tracés, plus CSS vs SMIL vs GSAP et SVG vs Lottie.
L'animation SVG déplace ou redessine des formes vectorielles avec CSS, SMIL ou JavaScript. Les keyframes CSS gèrent les transformations, l'opacité et l'astuce de tracé de ligne combinant stroke-dasharray et stroke-dashoffset. Les balises SMIL comme <animate> peuvent transformer des tracés et suivre des chemins de mouvement sans script. Des bibliothèques comme GSAP ajoutent des timelines et le contrôle au défilement. Lottie convient aux animations After Effects créées par des designers.
Quelle technique pour quel effet
Chaque animation de cette page tourne en direct à partir du code affiché à côté, dans un cadre où les scripts sont désactivés, donc ce que vous copiez est exactement ce qui fonctionne sans JavaScript. Chacune s'arrête aussi pour les visiteurs dont le système demande des animations réduites. Un générateur de tracé de ligne en haut de page écrit l'astuce du trait pour n'importe quel tracé que vous collez.
Donnez au trait un tiret aussi long que le tracé avec stroke-dasharray, poussez-le hors de vue avec un stroke-dashoffset égal, puis animez le décalage jusqu'à 0. Le tiret glisse en place et la ligne semble se dessiner toute seule. pathLength="1" vous permet d'utiliser 1 pour les deux valeurs.
Non. Chrome a annoncé en 2015 un projet de dépréciation, puis l'a suspendu. Les éléments SMIL comme animate, animateTransform et animateMotion fonctionnent dans tous les grands navigateurs actuels et font partie de la spécification SVG.
En partie. La propriété CSS d accepte des valeurs path() et peut être animée dans les navigateurs Chromium et Firefox, mais Safari ne la prenait pas en charge au moment de la rédaction, alors vérifiez sur caniuse. Les deux tracés doivent avoir le même nombre et le même type de commandes. SMIL animate sur l'attribut d fonctionne plus largement.
Utilisez du SVG simple avec CSS pour les icônes, les loaders et les illustrations simples que vous pouvez décrire en code. Utilisez Lottie quand un motion designer crée un personnage ou une scène complexe dans After Effects et que vous voulez la restituer fidèlement. Lottie nécessite une bibliothèque de lecture ; le SVG simple, non.
Placez les animations CSS dans une media query prefers-reduced-motion ou désactivez-les à l'intérieur. Le CSS ne peut pas mettre SMIL en pause, alors affichez une version fixe du graphique dans cette media query, ou appelez pauseAnimations() sur l'élément svg depuis un script.
Les vingt fonctionnent sans JavaScript et incluent une règle pour les animations réduites. Modifiez-les directement sur place.
L'astuce classique du trait avec pathLength=1, pour que les valeurs de tiret ne dépendent pas de la longueur réelle.
Un tracé plus long dessiné lentement avec un easing linéaire donne l'impression d'un stylo en mouvement.
Un cercle avec un tiret partiel tourne ; transform-box garde la rotation centrée.
Des valeurs animation-delay décalées transforment un seul jeu de keyframes en vague.
Mise à l'échelle et fondu combinés pour un radar ou un indicateur en direct.
Chaque barre s'agrandit sur l'axe Y depuis sa base, avec sa propre durée.
Les barres grandissent une fois au chargement. forwards conserve l'état final, et la règle de réduction des animations affiche simplement le graphique terminé.
Le même principe de tiret sur un cercle. Faites-le pivoter de -90 degrés pour qu'il commence en haut.
Survolez le bouton ou donnez-lui le focus. Chaque ligne se déplace et pivote avec une transition, sans keyframes.
Deux mises à l'échelle rapides puis une pause, le tout dans une seule liste de keyframes.
Fonctionne dans Chromium et Firefox. Là où d n'est pas pris en charge, la forme reste un carré. Les deux tracés utilisent les mêmes commandes dans le même ordre.
SMIL modifie directement l'attribut d, mieux pris en charge que la propriété CSS d. La copie fixe s'affiche en cas d'animations réduites.
rotate=auto oriente la forme dans le sens du déplacement.
Les valeurs de rotate prennent le point central comme deuxième et troisième nombres.
SMIL anime les couleurs des arrêts du dégradé, ce que des keyframes CSS sur stop-color peuvent aussi faire.
Un tracé deux fois plus large que la vue glisse vers la gauche d'exactement une période, donc la boucle n'a pas de raccord visible.
Rotation depuis le haut de la cloche, déclenchée par le survol ou le focus clavier.
Un trait en tirets avec un décalage animé, l'aspect d'un cadre de sélection dans les éditeurs d'images.
De courts tirets sur une ligne courbe se déplacent en continu pour suggérer une direction.
L'écrasement à l'impact donne du poids. transform-origin en bas garde la balle au sol pendant qu'elle s'écrase.
Trois façons d'animer un SVG
Code uniquement, car les cadres de démo ont les scripts désactivés. GSAP est gratuit sous sa propre licence, qui n'est pas MIT, alors lisez ses conditions avant de le mettre en production.
Étoile
Vague
Maison
Rejouer
Votre système demande des animations réduites, le dessin est donc affiché terminé. Appuyez sur Rejouer pour le lire une fois.
Données du tracé (attribut d)
Durée : {n}s
Épaisseur du trait : {n}
Easing
Couleur
SVG et CSS
Copier le code
Commencer gratuitement · Sans carte bancaire