CSS Motion Path avec SVG : guide pratique pour le web moderne

CSS Motion Path avec SVG

CSS Motion Path permet de faire avancer un element le long d'une forme definie. Pour les equipes qui travaillent avec des SVG, c'est pratique : une courbe, une route ou une ligne deja presente dans le design peut devenir une trajectoire d'animation dans le navigateur.

A retenir

offset-path definit la trajectoire.
offset-distance controle la progression sur cette trajectoire.
Les donnees de chemin SVG peuvent etre reutilisees dans CSS path().
Les mises en page responsives demandent des tests precis.
prefers-reduced-motion doit toujours etre pris en charge.

Exemple de base

.marker {
  offset-path: path("M20 120 C120 20 220 220 340 80");
  animation: travel 4s linear infinite;
}

@keyframes travel {
  to {
    offset-distance: 100%;
  }
}

La valeur de path() reprend la syntaxe SVG. Vous pouvez donc partir d'une route extraite d'une illustration, d'une carte ou d'un composant produit.

Cas d'usage utiles

CSS Motion Path fonctionne bien pour les visites guidees, les marqueurs sur une carte, les icones qui suivent une courbe, les indicateurs de progression et les visualisations de donnees. Avant de coder l'animation, isolez le chemin avec SVG Path Extractor, controlez le fichier dans SVG Viewer, puis allegez-le avec SVG Optimizer.

Modele HTML et CSS

<svg viewBox="0 0 360 160" aria-hidden="true">
  <path d="M20 120 C120 20 220 220 340 80" fill="none" stroke="currentColor" />
</svg>

<span class="dot" aria-label="Upload progress"></span>

.dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #14b8a6;
  offset-path: path("M20 120 C120 20 220 220 340 80");
  offset-distance: 0%;
  offset-rotate: auto;
  animation: move-dot 3200ms ease-in-out infinite;
}

@keyframes move-dot {
  to {
    offset-distance: 100%;
  }
}

offset-rotate: auto oriente l'element selon la direction du chemin. Gardez-le pour les fleches ou objets directionnels, pas pour les libelles.

Responsive et accessibilite

Un path() CSS ne se redimensionne pas automatiquement comme une viewBox SVG. Gardez une zone d'animation stable, alignez les coordonnees sur le design source et verifiez plusieurs tailles d'ecran.

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
    offset-distance: 100%;
  }
}

Le mouvement doit guider le regard sans masquer le contenu. Evitez les boucles fortes sur les pages longues, ne cachez jamais un bouton ou un champ, et ne faites pas dependre la comprehension d'un etat uniquement de l'animation.

Workflow SVGView

Ouvrir le fichier dans SVG Viewer et verifier la viewBox.
Extraire la route avec SVG Path Extractor.
Nettoyer les SVG externes avec SVG Sanitizer.
Formater le balisage dans SVG Formatter.
Optimiser avec SVG Optimizer, puis retester.

Conclusion

CSS Motion Path transforme un chemin SVG en mouvement d'interface lisible et maintenable. Choisissez une trajectoire simple, donnez un role clair a l'animation et validez l'experience avant la mise en ligne.

CSS Motion Path avec SVG : guide pratique pour le web moderne