Par

Pour animer un objet le long d'un chemin, nous utilisons habituellement une bonne vieille bibliothèque JS, genre GSAP. Aujourd'hui, grâce au nouveau module CSS Motion Path, nous pouvons le faire en pur CSS !

J'ai créé quelques animations sympa qui utlisent ces nouvelles propriétés, afin de passer en revue les techniques Motion Path.

See the Pen CSS Motion Path with SVG by Michelle Barker (@michellebarker) on CodePen.

See the Pen CSS Motion Path spirograph by Michelle Barker (@michellebarker) on CodePen.

Une animation simple

Pour créer une animation sur un chemin, nous utilisons offset-path auquel nous donnons une valeur représentant le chemin (la syntaxe est similaire au chemin SVG) et nous animons la propriété offset-distance.
 NdT : pour plus d'information sur la syntaxe Path de SVG, consultez l'article complet de Chris Coyier traduit ici même.

La propriété offset-path définit le tracé d'un mouvement sur lequel un élément est positionné, relativement au conteneur parent ou au système de coordonnées SVG.
La propriété offset-distance définit une position le long d'un chemin offset-path.

CSS

.obj {
  offset-path: path("M.4 84.1s127.4 188 267.7 0 247.3 0 247.3 0");
  animation: move 2000ms;
}

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

Voici le résultat :

See the Pen Simple offset-path animation by Michelle Barker (@michellebarker) on CodePen.

Nous pouvons aussi modifier le comportement de l'objet pour lui appliquer une rotation grâce à offset-rotate ou modifier sa position initiale grâce à offset-position. L'exemple suivant illustre le changement de comportement de l'objet lorsqu'on utilise offset-rotate :

See the Pen Offset-path with offset-rotate by Michelle Barker (@michellebarker) on CodePen.

Motion path et SVG

J'étais également intéressée par le chemin réel parcouru par les éléments. Dans les démos ci-dessus, je fais cela en incluant un SVG avec les mêmes coordonnées de chemin dans le HTML et en utilisant le positionnement absolu. La spécification permet de passer une URL à la fonction path () (similaire à clip-path), ce qui permettrait de simplement inclure l'ID de chemin SVG et d'éviter de dupliquer le chemin en CSS. (Notre fichier CSS devient très compliqué si nous incluons un chemin complexe avec de nombreuses coordonnées...) Mais cela ne semble être pris en charge nulle part, nous devrons donc nous contenter d'utiliser les coordonnées du chemin.

Par ailleurs, cela signifie que nous avons moins de contrôle sur la réactivité de l'animation, car nous ne pouvons pas passer à l'échelle notre SVG et le chemin correspondant : si nous essayons de changer la largeur SVG, le chemin reste à sa taille d'origine. (Je suis assez sûre que c'est le cas, car je ne peux pas faire en sorte qu'il se comporte autrement, mais si vous avez une solution, faites-le moi savoir!).

Dessiner le chemin

Nous pouvons déplacer un élément le long d'un chemin, mais nous pouvons aussi lui faire dessiner ce chemin. Il est déjà possible de "dessiner" les chemins SVG en utilisant les propriétés CSS stroke-dashoffset et stroke-dasharray, l'astuce étant de mettre la valeur de stroke-dasharray à la longueur du chemin puis d'animer depuis ce point décalé jusqu'à la valeur 0 :

CSS

.path {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: draw 1000ms;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

Cet excellent article de CSS Tricks, Ligne animée en SVG, en donne tout le détail.

Si nous utilisons l'animation de "dessin" avec la même durée et la même fonction de timing (easing) que l'animation offset-path, elles se produiront simultanément et le chemin semblera dessiné par l'élément animé.

Dans la deuxième démo, au début de cet article, l'animation déplaçant l'objet le long du chemin fait deux boucles pour chaque cycle. La ligne est d'abord "dessinée" en utilisant stroke-dashoffset, puis "effacée" en passant d'une valeur positive d'offset à une valeur négative.

CSS

.path {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: draw 1000ms;
}

@keyframes draw {
  0% {
    stroke-dashoffset: 520;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -520;
  }
}

Une animation plus douce avec box-shadow

Encore une petite astuce : lorsque j'ai conçu le premier exemple, j'ai remarqué qu'il était assez rapide et que l'animation avait des "sautes" en certains endroits. Pour rendre l'animation plus naturelle, j'ai ajouté une box-shadow tant que l'objet était en mouvement, ce qui crée une sorte d'effet de flou et adoucit l'animation :

CSS

@keyframes move {
  10% {
    opacity: 1;
    offset-distance: 0%;
  }
  30% {
    box-shadow: -0.5rem 0 0.3rem salmon;
  }
  70% {
    box-shadow: -0.5rem 0 0.3rem salmon;
  }
  90% {
    opacity: 1;
    offset-distance: 100%;
    box-shadow: none;
  }
  100% {
    opacity: 0;
    offset-distance: 100%;
  }
}

Compatibilité navigateurs

Pour l'instant, offset-path est supporté par Chrome, et dans Firefox depuis la version 72. Pour connaître l'état de la compatibilité à la date de lecture de cet article, vous pouvez consulter CanIUse.

Ressources

Dan Wilson a créé une jolie sélection de démos Codepen qui illustrent les différentes propriétés de Motion Path. Il vient de publier un article à ce sujet.

(publicité)


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les animations parus dans la Cascade.

Tous les articles sur SVG parus dans la Cascade.


original paru le 6 janvier 2020 dans CSS { In Real Life}
Traduit avec l’aimable autorisation de l’auteur.
Copyright Michelle Barker © 2020
.

Sur l’auteur : est développeuse frontend principale chez Atomic Smash à Bristol, UK, et blogueuse sur CSS In Real Life. Elle donne des conférences techniques pour Mozilla.