Dans le cours : HTML : Les images responsive

Accédez au cours complet aujourd’hui

Inscrivez-vous aujourd’hui pour accéder à plus de 24 700 cours dispensés par des experts.

Animer du SVG avec le CSS

Animer du SVG avec le CSS - Tutoriel HTML

Dans le cours : HTML : Les images responsive

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Animer du SVG avec le CSS

“

Pour terminer ce chapitre, voyons comment nous pouvons utiliser les animations CSS avec nos images au format SVG. De retour dans mon éditeur de code, je vais maintenant définir une animation dans ma feuille de style. Pour cela, j'ai besoin de la directive Keyframes du CSS, avec sa paire d'accolade. Je vais donner un nom à cette animation, je vais l'appeler rotation, comme ceci. Je vais avoir deux étapes dans cette animation. Donc première étape avec le mot clé From, j'ai envie d'une rotation de 0 degré. Et à l'arrivée, To, j'ai envie d'une rotation de 360 degrés, donc j'aurais fait exactement un tour. Maintenant, je vais devoir appliquer cette rotation, cette animation, à l'un des éléments de mon logo. Donc, de retour dans mon code SVG, je vais prendre ici le dernier Path ici dans le fond, je vais lui donner un identifiant, voilà, et je vais l'appeler Triangle, comme ceci. C'est lui que j'ai envie d'animer. Donc, je remonte au niveau de ma feuille de style, Et maintenant, je vais…

Table des matières