Guide du débutant sur l'animation SVG avec CSS

Les graphiques vectoriels évolutifs (SVG) sont plus que de simples fichiers image. En tant qu'application XML, les SVG contiennent un balisage qui ressemble et fonctionne comme HTML. Vous pouvez également les utiliser conjointement avec du code CSS et JavaScript. Cela permet d'animer des fichiers SVG, en créant des images complexes qui fonctionnent bien pour la conception Web et d'autres environnements dynamiques.

Mais comment fait-on une animation SVG? Commencez avec une forme SVG, animez-la à l'aide de CSS et appliquez ces principes pour utiliser l'animation dans votre propre travail.

Animer des SVG avec HTML et CSS

Bien que vous puissiez utiliser JavaScript pour animer des SVG par programmation, CSS prend désormais également en charge les animations. Vous pouvez trouver tous les exemples de code sur le CodePen pour ce projet.

Construire une image SVG dans HTML

La première étape de ce processus consiste à créer l'image SVG avec laquelle vous allez travailler. Vous pouvez trouver le balisage SVG dans le panneau HTML sur CodePen.

Structure SVG

Bien que les SVG partagent un format similaire à HTML, les balises que vous utilisez pour les créer sont différentes. Un SVG a des balises d'ouverture et de fermeture () qui peut contenir une variété de propriétés différentes. Dans notre cas, nous utilisons identifiant et viewBox Propriétés. La propriété id fonctionne comme n'importe quel autre identifiant HTML, vous fournissant un identifiant unique à utiliser dans votre CSS/JS. La propriété viewBox définit la taille de notre SVG.

<!-- SVG avec une taille responsive -->
<identifiant svg ="MUOSVGAnimation" viewBox="0 0 800 600">
<!-- Contenu SVG -->
</svg>

Vous pouvez utiliser les propriétés width et height à la place, comme le montre l'exemple suivant. Cependant, viewBox crée un SVG réactif qui correspond à la taille de la fenêtre sans casser son rapport d'aspect.

 SVG avec une taille statique 
<identifiant svg ="MUOSVGAnimation" largeur="800" hauteur="600">
<!-- Contenu SVG -->
</svg>

Formes SVG

Vous pouvez créer des images détaillées avec des SVG, avec un éventail d'outils de forme différents à votre disposition. Cet exemple SVG utilise trois des formes disponibles, mais il y en a beaucoup d'autres. Chacune des formes de cet exemple a un identifiant unique que les animations CSS peuvent utiliser ultérieurement.

• SVG Ellipse: Il s'agit d'un outil cercle/ovale. Il spécifie les propriétés du rayon de l'axe y/x (rx/ry), de la couleur de remplissage et de la largeur du trait. Il est important de se rappeler que le rayon que vous choisissez avec cet outil sera la moitié du diamètre de la forme.

<identifiant de l'ellipse ="cercle" rx="100" ry="100" remplir="#ffed00" largeur de trait="0"/>

• SVG Rect: L'outil SVG rect crée un carré ou un rectangle. Celui-ci a des propriétés pour la largeur/hauteur, une transformation, une couleur de remplissage et une largeur de trait.

<ID rect ="carré" largeur="200" hauteur="200" transformer="traduire (300 200)" remplir="#05f"
 largeur de trait="0"/>

• Polygone SVG: utilisez un polygone SVG pour définir un nombre spécifique de points et créer des formes arbitraires de différentes tailles. Le polygone dans l'exemple est à trois côtés, ce qui en fait un triangle, et vous pouvez voir la position de chaque point tracé dans ses propriétés. Parallèlement à cela, nous avons des propriétés pour la position, la couleur de remplissage et la largeur du trait du triangle.

<identifiant de polygone="Triangle" points="15,-97 115,102 -84,102 15,-97"
 transformer="traduire (0,0)" remplir="#f00" largeur de trait="0"/>

Une fois l'animation en place, les formes s'aligneront les unes à côté des autres.

Ces trois formes SVG sont parmi les plus courantes, mais il y en a d'autres parmi lesquelles choisir. Vous pouvez utiliser les formes suivantes lorsque travailler avec une animation SVG:

• Cercle SVG: Cette forme est similaire à une ellipse, mais elle a toujours des rayons X et Y égaux.
• Ligne SVG: Une ligne SVG est un segment de ligne unique avec deux points, un à chaque extrémité.
• Polyligne SVG: les polylignes sont comme des lignes de base, sauf qu'elles peuvent avoir plus de deux points.
• Polygone SVG: les polygones SVG sont comme des rectangles, sauf qu'ils peuvent avoir plus de quatre points, ce qui rend possibles des formes complexes.
• Chemin SVG: les chemins SVG fonctionnent de la même manière que l'outil plume d'Adobe Photoshop. Les lignes peuvent se connecter comme une polyligne/un polygone, mais des courbes peuvent également leur être appliquées.

Comment animer des SVG avec CSS

Maintenant que vous avez des formes dans votre SVG, il est temps de passer à l'animation CSS. Chacune des formes a une animation différente pour illustrer certaines des options dont vous disposez, mais il y a beaucoup plus à explorer avec vos propres conceptions. Le cercle se déplace sur l'écran, les coins du carré s'arrondissent et le triangle tourne. Tous ceux-ci utilisent Images clés CSS pour créer des animations fluides.

Déplacement du cercle à l'aide de la transformation et de la traduction

Le cercle dans l'exemple SVG se déplace du bas vers le haut de l'écran pendant son cycle d'animation. Vous devez affecter une animation au cercle avant qu'il puisse se déplacer, via une propriété CSS :

#cercle {
 animation: circle_anim 2000ms linéaire infini normal vers l'avant
}

Le premier mot de la valeur, cercle_anim, est un nom pour l'animation. Il fonctionne pendant deux secondes (2000ms). Il a un linéaire courbe qui maintient sa vitesse constante et est configurée pour exécuter un infini nombre de fois dans le vers l'avant direction. Vous pouvez utiliser des images clés pour définir des phases individuelles de l'animation :

@images clés cercle_anim {
 0% { transformer: Traduire(155px, 305px) }
 45% { transformer: Traduire(155px, -123px) }
 50% { transformer: Traduire(-123px, -123px) }
 55% { transformer: Traduire(-123px, 728px) }
 60% { transformer: Traduire(155px, 728px) }
 100% { transformer: Traduire(155px, 305px) }
}

Il y a six images clés dans cette animation, donc le cercle se déplacera à six endroits différents dans chaque cycle. La transformer: traduire La propriété définit la position du cercle à chaque étape. À 0 %, le cercle est au milieu de l'écran et se déplace vers le haut et hors de vue de 45 %. De 50 %, il s'est déplacé vers la gauche de l'écran avant de descendre sous la fenêtre à 55 %. Le cercle revient dans sa position horizontale de 60 % et l'animation est terminée à 100 % avec le cercle de retour au milieu de l'écran.

Animer la propriété Border Radius du carré

Le carré de l'exemple offre une bonne référence pour les animations de propriétés générales. Tant que vous connaissez la syntaxe correcte à utiliser, vous pouvez animer n'importe quelle propriété CSS. La propriété border-radius en est une bonne démonstration. Le carré a des coins pointus qui se transforment en coins arrondis puis redeviennent des coins carrés.

#carré { animation: square_anim 2000ms easy-in-out infini normal vers l'avant }

L'animation carrée s'appelle square_anim et a une durée d'exécution de deux secondes. La facilité d'entrée La courbe ralentit l'animation au début et à la fin, créant un effet lisse.

@images clés square_anim {
 0% { réception: 0px; ry: 0px }
 45% { réception: 40px; ry: 40px }
 55% { réception: 40px; ry: 40px }
 100% { réception: 0px; ry: 0px }
}

Comme vous pouvez le voir, cette animation comporte quatre images clés. Le rayon de bordure X et Y change de 0px à 40px entre 0% et 45%, s'arrêtant à 40px jusqu'à 55%. Il revient ensuite à 0px pour chaque rayon au moment où l'animation atteint 100%.

Faire pivoter le triangle SVG avec transformation

L'animation SVG finale de l'exemple est la plus simple, avec le triangle tournant autour de son point central. La forme effectue une révolution complète toutes les deux secondes et continue de fonctionner à l'infini. Il a une courbe d'atténuation qui ralentit l'animation à la fin. L'animation s'appelle triangle_anim.

#Triangle { animation: triangle_anim 2000ms effacement des avances normales infinies }

Cette animation a deux images clés, une à 0% et l'autre à 100%. La propriété Transform rotate fait passer le triangle de 0 degré à 0 % à 360 degrés à 100 %, créant une rotation complète.

@images clés triangle_anim {
 0% { transformer: Traduire(644px, 297px) tourner(0deg) }
 100% { transformer: Traduire(644px, 297px) tourner(360 degrés) }
}

Comment animer d'autres propriétés

Les trois animations décrites ci-dessus sont un bon point de départ lorsque vous travaillez avec des SVG, mais vous voudrez probablement pousser cela plus loin. Vous pouvez utiliser la règle d'animation CSS pour ajuster presque toutes les valeurs de propriété que vous pouvez attribuer à votre SVG. Cela inclut des valeurs de base, telles que le dimensionnement et le positionnement, ainsi que des valeurs plus avancées, telles que les bordures, les ombres et les modes de fusion.

Dans les rares cas où CSS ne peut pas faire le travail, vous pouvez utiliser du code JavaScript pour animer des images SVG. Vous pouvez trouver de nombreux guides pour vous aider une fois que vous vous sentez prêt à passer à l'étape suivante avec vos SVG.

Créer vos propres animations SVG

Que vous soyez un concepteur Web, un développeur de logiciels ou simplement une personne créative, les animations SVG peuvent être amusantes et satisfaisantes à réaliser. Vous pouvez trouver de nombreuses ressources sur le Web qui peuvent vous aider avec l'animation Web, une fois que vous maîtrisez les bases.

10 modèles d'arrière-plan CSS que vous pouvez utiliser sur votre site Web

Lire la suite