Share
C’est la saison. Dans ce didacticiel, je vais créer quelques icônes SVG animées CSS, sur le thème des vacances. Il y a de très bonnes icônes sur Iconmelon, un site qui héberge de nombreux jeux d’icônes vectorielles gratuits. Les icônes que j'utilise sont une gracieuseté du designer Sam Jones. Alors attrapez-vous une tasse de lait de poule, tirez votre ordinateur portable jusqu'à la bûche de Noël, et commençons!
Si vous souhaitez utiliser SVG sur le Web, les icônes sont un excellent point de départ. Les SVG étant souples, indépendants de la résolution et légers, les icônes se prêtent naturellement au format vectoriel. De plus, tout comme le HTML, les SVG peuvent être facilement stylisés avec CSS, qui inclut une animation CSS3. Ajouter une touche d'interactivité avec une animation à vos icônes peut aider à créer une expérience agréable pour vos utilisateurs et à ajouter un contexte à propos de ce qu'une icône représente..
Pour une introduction à SVG et au Web, jetez un coup d’œil à Fichiers SVG: d’Illustrator au Web..
Remarque: Les démonstrations suivantes utilisent des technologies de pointe qui, au moment de la rédaction de cet article, n'étaient pas prises en charge par certains navigateurs tels qu'Internet Explorer. Si vous suivez le didacticiel, mieux vaut utiliser Chrome ou Safari. Le support de Mozilla est parfaitement possible avec les préfixes de propriété appropriés. Vous pouvez certainement vous attendre à ce que le support de ces technologies s'améliore à l'avenir.
Aditionellement: Dans cet article, j'ai omis certains préfixes de navigateur nécessaires de certaines propriétés CSS pour des raisons de concision et de lisibilité. Consultez la bibliothèque prefixfree de Lea Verou si vous souhaitez écrire facilement des préfixes CSS gratuits. Vous pouvez également essayer de créer vos démos sur Codepen, qui peut être facilement configuré pour utiliser prefixfree..
L'un des plus gros coups sur SVG est que le code est difficile à gérer. Le code SVG exporté par Illustrator, mon éditeur de graphiques vectoriels de choix, est plutôt illisible à première vue. Inkscape fait un meilleur travail d’exportation de SVG à cet égard, mais j’ai constaté que simplifier et formater le code pouvait grandement faciliter sa lecture et son utilisation.
Voici le code SVG pour le premier exemple d'animation que je vais démontrer, une lumière clignotante de Noël.
Ce code a été exporté à partir de mon outil d'édition de vecteurs, Adobe Illustrator. C'est presque illisible à première vue. Voici ce même balisage simplifié:
J'ai considérablement simplifié ce code XML en supprimant une grande partie des balises supplémentaires générées par le programme par défaut. Mon élément SVG de base contient les éléments suivants:
Accentsconagua
svg-light. J'ai utilisé le svg- préfixe pour cibler facilement des éléments à l'intérieur d'un SVG spécifique.viewbox propriété. La valeur de la viewbox Cette propriété définit les proportions du document et équivaut à la taille de la planche graphique dans Illustrator..xmnls propriété. Cette propriété définit l’espace de nom XML du fichier SVG et aide certains agents d’utilisation à comprendre le balisage..Aux éléments imbriqués dans le SVG qui définissent les formes qui composent l’image, tels que le les chemins, cercles et rects, J'ai appliqué des classes en ligne avec leur balise d'ouverture. Toutes les propriétés en ligne de l'élément, telles que leurs coordonnées, ont été cassées à de nouvelles lignes. De plus, j'ai mis en retrait tous les éléments internes sous la balise de base SVG.
Tout ce travail est pour une raison. Tout d'abord, cela rend le code beaucoup plus facile à lire. Deuxièmement, dans l'éditeur de code de mon choix, Sublime Text 3, je peux facilement plier des éléments SVG individuels ou des SVG entiers, tandis que les noms de classe permettent toujours de conserver le contexte relatif à la nature de ces éléments..
Très bien, entrons dans l'esprit des fêtes et animons une lumière clignotante de Noël! Voici ce que nous cherchons à réaliser:
Découvrez le stylo lumineux de Noah Blon (@noahblon) sur CodePen
Ce que je veux faire, c'est animer l'élément path que j'ai donné à une classe de ampoule dans le SVG.
Avec CSS, je vais donner une couleur de remplissage au bulbe et définir ses propriétés d'animation.
.svg-light .bulb remplissage: hsl (204, 70%, 23%); nom-animation: bleu brillant; animation-durée: 1s; animation-iteration-count: infini; animation-timing-function: facilité d'entrée / sortie; animation-direction: alternative;
le remplir Cette propriété nous permet de définir la couleur d'un élément SVG. Lorsque cela est possible, j'aime bien utiliser HSL (teinte, saturation, luminosité) pour définir les valeurs de couleur, car il est très intuitif de travailler avec. Ici, j'ai choisi une couleur bleue (teinte 204) et j'ai maintenu la valeur de luminosité à 23%, ce qui signifie que nous aurons une couleur bleu foncé..
J'ai configuré le bulbe pour qu'il soit animé par une animation d'image clé appelée bleu luisant. La durée de l'animation est d'une seconde. L'animation itère infiniment, ce qui signifie qu'elle fonctionnera pour toujours. Le minutage de l'animation est facilité au début et à la fin des images clés, ce qui crée une transition d'apparence plus douce aux points de début et de fin de l'animation. Enfin, l'animation est configurée pour alterner, ce qui signifie qu'elle va et vient du début à la fin..
Pointe: Vous savez peut-être qu'il existe une syntaxe abrégée pour les règles d'animation CSS, mais je préfère généralement séparer les règles pour les rendre plus faciles à comprendre, à modifier et à partager si plusieurs chaînes sont chaînées..
Maintenant, je vais définir le bleu luisant animation d'images clés:
@ keyframes glow-blue 0% fill: hsl (204, 80%, 23%); 100% remplissage: hsl (204, 80%, 63%);
Ici, j'ai défini la couleur de remplissage de début et de fin de l'élément auquel cette animation est appliquée. La seule valeur qui change est la clarté de la couleur (le "l" en hsl), ce qui signifie que la lumière s'animera d'une version plus sombre à plus claire de la même teinte. Voilà la syntaxe intuitive que HSL fournit.
Parce que j'ai défini l'animation comme alternant infiniment, la lumière alterne de sombre à clair et ne s'arrête jamais. Il semblera donc clignoter.
OK, maintenant canalisons notre Clark W. Griswold intérieur et animons tout un tas de lumières de Noël. C'est ce que je vais créer:
Voir le stylo 540257e4a8b727e435c8e4033602ebb0 de Noah Blon (@noahblon) sur CodePen
J'ai créé cinq lumières de couleurs différentes. Chaque lumière est enveloppée dans un div d'une largeur de 20%. Ces divs sont alors flottés à gauche pour apparaître en ligne les uns avec les autres. Comme je n'ai pas défini le SVG comme étant une hauteur ou une largeur définie et que j'ai conservé la propriété viewbox, le SVG est fluide à la taille de son parent sans perdre son rapport de format ni sa qualité. Un des atouts majeurs de SVG.
Pour chaque fichier SVG, j'ai étendu la classe de base svg-light avec un suffixe de couleur (par exemple, svg-light - red). Voici un extrait des règles que j'ai utilisées pour animer les nombreuses lumières:
.svg-light .bulb animation-duration: 1s; animation-iteration-count: infini; animation-timing-function: facilité d'entrée / sortie; animation-direction: alternative; .svg-light - rouge .bulb fill: hsl (6, 63%, 16%); nom-animation: rougeoyant; délai d'animation: .5s; animation-durée: 1.25s; @ images clés rougeoyantes 0% remplissage: hsl (6, 63%, 16%); 100% remplissage: hsl (6, 63%, 56%);
Les propriétés d'animation de base sont toujours appliquées à la classe de base de svg-light afin qu'ils puissent être partagés entre toutes les lumières. Pour chaque variation de couleur, j'ai créé une animation par image clé différente, telle que rougeoyant ou bleu luisant et leur donnant différents délais et durées d’animation. De cette façon, les lumières clignoteront avec leur couleur appropriée et toutes ne clignoteront pas en même temps..
J'utiliserai les mêmes concepts que ceux décrits ci-dessus pour animer le plus célèbre des rennes de tous, Rudolph. Voici le résultat final:
Voir le stylo Icône SVG Rudolph Animated with CSS de Noah Blon (@noahblon) sur CodePen
D'abord, je vais animer son nez rougeoyant:
.svg-rudolph .nose nom-animation: lueur; animation-durée: 6s; animation-iteration-count: infini; animation-timing-function: facilité d'entrée / sortie; animation-direction: alternative; @keyframes glow 0% fill: hsl (6, 93%, 16%); 50% remplissage: hsl (6, 93%, 56%); 100% remplissage: hsl (6, 93%, 56%);
Cela ressemble assez à notre lumière de Noël. Dans l'animation des images clés, j'anime à 50%, puis à 100%. Comme la durée de l'animation est de six secondes, cela signifie que dans trois secondes, le nez deviendra rouge plus clair et restera cette couleur pendant trois secondes supplémentaires jusqu'à la fin de l'animation. De plus, comme j'ai paramétré l'animation en alternance, elle s'exécutera désormais de la fin au début. Par conséquent, le nez restera rouge pendant trois secondes supplémentaires avant de s'assombrir au cours des trois dernières secondes. Comprendre l'interaction entre les pourcentages d'images clés et les définitions d'animation, telles que la durée, est essentiel pour créer des animations CSS efficaces..
J'ai également appliqué une transition au point culminant du nez de Rudy:
.svg-rudolph .nose-highlight fill-opacity: 0; nom-animation: highlight-fade; animation-durée: 6s; animation-iteration-count: infini; animation-timing-function: facilité d'entrée / sortie; animation-direction: alternative; @keyframes highlight-fade 0% fill-opacity: 0; 25% remplissage-opacité: 0; 100% opacité de remplissage: 1;
Ici, j'anime une propriété SVG différente, la opacité de remplissage. Cette propriété prend une valeur comprise entre 0 et 1; 0 étant totalement transparent, 1 étant totalement opaque. Enfin, je vais donner un peu plus de vie à Rudy en faisant clignoter ses yeux:
.svg-rudolph .eye nom-animation: blink; animation-durée: 8s; animation-iteration-count: infini; origine de la transformation: 50%; @ images clés clignotent 0% transformation: scaleX (1) scaleY (1); 1% transformation: scaleX (1.3) scaleY (0.1); 2% transformation: scaleX (1) scaleY (1); 60% transformer: scaleX (1) scaleY (1); 61% transformation: scaleX (1.3) scaleY (0.1); 62% transformation: scaleX (1) scaleY (1); 100% transformation: scaleX (1) scaleY (1);
J'ai créé une animation appelée cligner. Cette animation dure huit secondes et ne s'arrête jamais. Je ne fais pas alterner l'animation cette fois-ci, mais l'animation se déroulera jusqu'à la fin, puis reprend depuis le début..
Dans les images clés, l’animation clignotante est créée en manipulant l’échelle des yeux sur les axes X et Y. Par exemple, à la barre des 1%, les yeux sont redimensionnés à 1,3 de leur taille sur l’axe des X et à 0,1 fois leur taille normale de l’axe des Y. En d'autres termes, ils deviennent un peu plus larges et beaucoup plus courts. Un pour cent de la durée de l'animation plus tard, l'échelle des yeux revient à la normale. Par conséquent, le changement d'échelle se produit extrêmement rapidement. 8 secondes / 100 = 8 centièmes de seconde.
Un composant clé de l’utilisation de transform pour animer des éléments SVG consiste à définir les éléments. transformer-origine. Dans la plupart des cas, pour qu'une transformation soit correctement appliquée dans un SVG, nous devons définir l'origine de la coordonnée de transformation comme étant le centre de l'élément. Contrairement à un élément HTML, l’origine de transformation d’un élément SVG est par défaut son coin supérieur gauche, la coordonnée (0,0). En définissant l'origine de la transformation sur (50%, 50%), les origines des axes X et Y de la transformation seront au centre de l'élément, et les transformations seront ensuite appliquées correctement..
Remarque: Firefox a des problèmes quand il s'agit de transformer l'origine. Malheureusement, définir l’origine de la transformation sur 50% réinitialise les coordonnées X / Y de l’élément. Une solution consiste à reconstituer l'élément à sa position d'origine..
Pour cette démo, je vais animer une cloche qui sonne comme ceci:
Voir le stylo 63cdc3e8e785028deb35132d889b6090 de Noah Blon (@noahblon) sur CodePen
Jetons un coup d'oeil à un extrait du balisage SVG:
J'ai enveloppé le contour de la cloche et se remplit d'un Ce CSS devrait déjà être familier, mais quelques nouveautés se produisent. Tout d'abord, dans l'animation des images clés, la cloche est transformée, mais au lieu de transformer l'échelle, je transforme la valeur de rotation de l'élément. Cette animation fait osciller la cloche entre 27 et -27 degrés. L’autre nouveauté que j’ai faite est d’utiliser une valeur négative pour le J'ai appliqué une animation similaire au groupe contenant les éléments attaquant de la cloche. Cette fois, cependant, je traduis ou déplace les éléments le long de l'axe des abscisses plutôt que de les faire pivoter, de sorte que l'attaquant oscille à gauche et à droite.. Pour cette animation, je vais animer la neige qui tombe à l'intérieur d'une boule à neige. Voir le stylo 2addb5f98c757d61cec87bdcacb5870d de Noah Blon (@noahblon) sur CodePen J'ai créé un groupe d'éléments de cercle représentant la neige et les ai placés autour du périmètre du globe de neige, en les enveloppant dans un La neige n’est pas visible à l’extérieur du snowglobe car j’ai appliqué un un tracé de détourage au groupe contenant la neige. Un tracé de détourage est une forme qui peut être appliquée aux éléments SVG, en masquant les autres. Dans notre exemple de globe, j'ai créé un tracé de détourage circulaire qui couvre l'intérieur du globe.. le J'ai enveloppé le tracé de détourage dans un Pour appliquer le tracé de détourage, nous référons son URL, en l'occurrence son ID précédé d'un symbole de hachage, dans la propriété de tracé de détourage intégré d'un élément SVG: La neige est maintenant visible uniquement à l'intérieur de ce tracé de détourage circulaire. La neige est animée avec les mêmes techniques que j'ai décrites précédemment; traduit le long de l'axe des Y et l'opacité de remplissage proche de zéro à la fin de l'animation. Oui, les sélecteurs CSS3 fonctionnent sur les éléments SVG! Ici, j'ai donné à chaque élément de neige un délai différent pour qu'il ne tombe pas en même temps. Enfin, je vais animer du texte SVG pour obtenir un résultat comme celui-ci: Voir le stylo Message de Noah Blon (@noahblon) sur CodePen SVG nous permet d’appliquer des traits aux éléments SVG avec CSS. Pour ma dernière animation, je vais vous montrer comment dessiner progressivement le trait d'un élément. Pour réaliser cette animation, j'ai utilisé les propriétés de trait suivantes: La configuration du texte tracé nécessite un certain travail dans un éditeur graphique. Mon flux de travail est le suivant: Voici mon CSS pour configurer l'animation: J'ai défini le Si vous voulez en savoir plus sur cette technique, consultez le post de Jake Archibald Dessin au trait animé en SVG. J'ai également défini le fondu pour le fondu une fois le dessin au trait terminé, à l'aide de la propriété fill-opacity, similaire à celle que j'avais précédemment réalisée avec l'animation snowglobe.. Dans ce tutoriel, j'ai montré qu'avec CSS et SVG, vous pouvez créer des animations très efficaces. Si vous voulez rester coincé avec tout le code, ainsi que quelques animations supplémentaires, vous pouvez télécharger les exemples de Github ou consulter ma collection sur Codepen.. Si vous voulez être plus avancé, vous pouvez contrôler le contrôle des animations CSS avec JavaScript ou compléter vos animations CSS avec une animation JavaScript plus complexe, telle que celle prise en charge par l’étonnante bibliothèque SVG JS Snap SVG.. Merci d'avoir suivi ce tutoriel, j'ai hâte de voir les créations que vous avez créées! .svg-bell .group-bell nom-animation: bell-ring; animation-durée: 3s; animation-iteration-count: infini; animation-timing-function: facilité d'entrée / sortie; animation-delay: -1.5s; animation-direction: alternative; origine de la transformation: 50%; @keyframes bell-ring 0% transformer: rotate (27deg); 100% transformer: rotation (-27deg);
délai d'animation. Une valeur négative amène l'animation à commencer ce laps de temps dans l'animation. Dans ce cas, au lieu de commencer l'animation après un délai de 1,5 seconde, l'animation démarrera en réalité après 1,5 seconde. En faisant cela, la cloche commencera à la position neutre, qu’elle se trouve à 1,5 seconde dans l’animation, plutôt qu’à la position pivotée, à 0 seconde dans l’animation.. .svg-bell .striker nom-animation: striker-move; animation-durée: 3s; animation-iteration-count: infini; animation-timing-function: linéaire; délai d'animation: 1.5s; animation-direction: alternative; origine de la transformation: 50%; @keyframes striker-move 0% transform: translateX (3px); 100% transform: translateX (-3px);
Laissez-le neiger! Laissez-le neiger! Laissez-le neige!
defs étiquette. SVG nous permet de créer des éléments que nous pourrons réutiliser ultérieurement, tels que des chemins de détourage, des filtres ou des formes que nous pouvons éliminer. Il est recommandé d’envelopper les définitions telles que les chemins de détourage dans une balise defs afin de faciliter la lecture du fichier SVG..
.svg-snowglobe .snow nom-animation: chute de neige; animation-durée: 10s; animation-iteration-count: infini; animation-timing-function: facilité; .svg-snowglobe .snow: nth-child (1) animation-delay: 2s; .svg-snowglobe .snow: nth-child (2) animation-delay: 4s; .svg-snowglobe .snow: nth-child (3) animation-delay: 6s; .svg-snowglobe .snow: nth-child (4) animation-delay: 8s; .svg-snowglobe .snow: nth-child (5) animation-delay: 10s; .svg-snowglobe .snow: nth-child (6) animation-delay: 12s; .svg-snowglobe .snow: nth-child (7) animation-delay: 14s; .svg-snowglobe .snow: nth-child (8) animation-delay: 16s; .svg-snowglobe .snow: nth-child (9) animation-delay: 18s; .svg-snowglobe .snow: nth-child (10) animation-delay: 20s;
Joyeuses Fêtes
largeur du trait: la largeur du trait. Ceci est relatif à la taille du SVG et donc sensible.accident vasculaire cérébral: la couleur du trait.accident vasculaire cérébral: définit un trait en pointillé. Un tableau de valeurs en alternance définit la longueur des parties dessinées de la ligne pointillée et l'espace vide entre les tirets..accident vasculaire cérébral: définit le début du trait par rapport à la longueur du chemin.
.svg-message .text stroke-width: 1px; accident vasculaire cérébral: hsl (6, 63%, 36%); stroke-dasharray: 1865.753px 1865.753px; stroke-dashoffset: 1865.753px; opacité de remplissage: 0; remplissage: hsl (6, 63%, 36%); nom-animation: stroke, fill; animation-durée: 1s; délai d'animation: 0, 1s; animation-iteration-count: 1; animation-timing-function: facilité d'entrée / sortie; animation-fill-mode: en avant; @keyframes fadeIn 0% fill-opacity: 0; 100% opacité de remplissage: 1; @keyframes drawStroke 100% stroke-dashoffset: 0
accident vasculaire cérébral propriété correspond à la longueur du chemin total (vous pouvez trouver cette valeur dans Illustrator sous le nom Palette d'informations sur le document en utilisant l'option Object). Ensuite, j'ai donné le accident vasculaire cérébral une valeur de la longueur totale du trajet, ce qui éloigne complètement le trait de la visibilité. Ensuite, par image clé, animant le accident vasculaire cérébral propriété, le trait sera progressivement dessiné à l'écran.
Aller plus loin avec SVG et CSS
