Animer des éléments sur un chemin avec CSS

Motion Path est la plus excitante des nouveautés d’animation CSS de ces cinq dernières années, elle est présentée par Dudley Storey et son amie Alice (au pays des merveilles).

Par

CSS est parfait lorsqu’il s’agit de déplacer des éléments d’un point à un autre en utilisant les keyframes ou si l’on veut redimensionner des éléments, les faire tourner en rond ou se balancer. CSS nous permet également de recréer une animation “image par image” grâce à step(). Mais il touche depuis toujours à ses limites lorsqu’il s’agit de déplacer des éléments le long d’un chemin incurvé ou complexe.

La nouvelle spécification Motion Path, dérivée d’une technologie existant depuis une dizaine d’années dans SVG, permet aux éléments de suivre une courbe ou un chemin tracé à l’avance, en HTML et CSS natifs et avec une petite assistance de SVG. Actuellement, CSS motion path n’est supporté que par Chrome 46+ et Opera 33. Pour voir les démos, assurez-vous que votre navigateur est à jour de la dernière version (je reviendrai sur les solutions alternatives à la fin de cet article).

Demandez à Alice

Commençons par l’exemple d’Alice dans le terrier du lapin.

See the Pen Moving Elements on a Path with CSS by Kseso (@Kseso) on CodePen.

Alice est simplement une image PNG, la complexité réside dans le chemin (path). Je suis parvenu aux meilleurs résultats en suivant ces étapes de création des chemins :

  • Créez votre chemin dans Adobe Illustrator ou tout autre éditeur vectoriel. Le chemin de notre animation ressemble à ceci :

et le code à ceci :

<svg xmlns="http://www.w3.org/2000/svg" width="388px" height="401.1px" viewBox="0 0 388 401.1">  
    <path fill="#FFF" stroke="#000" d="M69.8, 98.3c116.9, 0,76.9, 261.5, 261.5, 261.5 s103.8-195.4, 233.8-195.4S627.5, 356, 715.2, 356"/>
</svg>  
  • Supprimez tout le code SVG, sauf l’information relative au chemin, autrement dit, conservez la valeur qui suit l’attribut d et éliminez le reste.
  • Assurez-vous que les coordonnées du chemin comportent des espaces après chaque virgule et pas de retour à la ligne dans la suite des coordonnées du chemin (en théorie ça ne devrait pas faire de différence mais j’ai constaté que Chrome a actuellement des problèmes d’interprétation des chemins d’animation).
  • Référencez le code dans CSS pour l’élément à faire bouger, en tant que valeur d’une propriété motion-path :
#alice {
    motion-path: path("M69.8, 98.3c116.9, 0,76.9, 261.5, 261.5, 261.5 s103.8-195.4, 233.8-195.4S627.5, 356, 715.2, 356");
}

La spécification Motion Path indique également qu’on peut utiliser une référence URL vers un chemin SVG en ligne, ce qui sera très pratique pour les designs responsifs. Actuellement elle ne semble pas être supportée. Les formes SVG, dont rect, ellipse, line et polyline sont supportées.

  • Créez une animation pour l’élément en utilisant la nouvelle propriété motion-offset :
@keyframes rabbithole {
  0% { motion-offset: 0; }
  100% { motion-offset: 100%; }
}

motion-offset représente la distance parcourue par l’élément le long du chemin.

Quant à Alice, je la rétrécis à mesure que l’animation progresse :

@keyframes rabbithole {
  0% { motion-offset: 0; transform: scale(1); }
  100% { motion-offset: 100%; transform: scale(0); }
}

Enfin, le CSS appelle l’animation :

#alice {
    will-change: transform;
    animation: rabbithole 2.2s forwards;
}

Alignement

Par défaut, l’élément animé est automatiquement aligné sur la tangente du chemin. Ce comportement peut être manipulé grâce à la propriété motion-rotation : en donnant à cette propriété la valeur reverse, on renvoie l’image de l’élément en miroir (en d’autres termes elle tourne de 180 degrés) et si l’on donne un angle pour valeur (par exemple motion-rotation: -45deg) on force l’élément à suivre le chemin suivant une orientation fixe.

Il est également important de noter que l’élément sera animé à partir du premier point dessiné dans le SVG, mais ce comportement peut être modifié en inversant les valeurs de motion-offset.

Conclusion

Motion Path est la plus excitante des nouveautés de CSS animation de ces cinq dernières années et cet article d’introduction ne fait qu’effleurer la surface des possibilités qui s’ouvrent à nous. Ce qui retient encore sa diffusion est le manque général de compatibilité navigateurs. Cependant, étant données les similarités de la spécification avec l’implémentation SVG initiale, il ne devrait pas être trop difficile de créer un polyfill pour permettre aux navigateurs de dupliquer un motion path en SVG. Si jamais je parviens à construire ma machine à arrêter le temps, c’est la première chose que je réaliserai. Pour l’heure, je ferai suivre cet article d’un autre relatif à l’équivalent SVG, de façon à ce que ceux qui sont intéressés puissent utiliser les mêmes concepts de cette technologie dans leurs pages web.


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.


Du même auteur dans La Cascade :

Animer des éléments sur un chemin avec CSS
Motifs SVG maoris
Les bases de SVG : Groupes
Bien utiliser l’attribut alt
Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.