Pure CSS Animations - Faites un bouton cool, un modal coulissant, et une page produit ! (Pas de Javascript)

1. Exemples rapides pour l'apprentissage rapide: Salut, tout le monde. Aujourd'hui, nous allons apprendre sur l'animation Web. L' animation est vraiment utile dans de nombreux contextes différents. L' œil humain est câblé pour suivre le mouvement. Donc, surtout lorsque nous intégrons cela dans un projet Web, cela nous aide vraiment à contrôler et à diriger l'attention des utilisateurs vers certaines parties de notre page Web. Sans oublier qu'il y a quelque chose de vraiment amusant et cool à déplacer votre souris pour votre doigt autour d'une page Web et de la voir répondre à vos actions. Aujourd'hui, nous allons apprendre quelques outils d'animation Web que vous pouvez appliquer dans un large éventail de contextes. On va apprendre à faire des boutons, effets de vol stationnaire, des images de ses effets. On va apprendre à implanter une fonctionnalité motile cool. Et puis on va même apprendre à copier une fonctionnalité cool de 10. Si vous connaissez CSS mais que vous ne l'avez jamais réellement utilisé pour animer une page Web qui sera parfaite pour vous. J' ai conçu ce tribunal pour vous présenter beaucoup de concepts dans un court laps de temps , alors commençons 2. Ce que votre besoin pour ce cours: le projet de classe va être très simple. Tout ce que vous devez faire est de prendre l'un des exemples de ce cours et de l'étendre d'une manière ou d'une autre . Vous pouvez gâcher avec le CSS, ajouter de nouveaux éléments au HTML et faire tout ce que vous voulez pour le rendre cool. Chaque mois, je vais choisir un projet de classe qui a été soumis, et je vais le mettre sur ma page twitter. Parlons très vite de ce dont tu vas avoir besoin pour ce cours. On va utiliser un stylo de code, donc il n'y a pas besoin de télécharger ou d'installer quoi que ce soit. Je recommande que vous ayez un navigateur Web moderne à jour. Peu importe lequel il est tant que vous avez installé la mise à jour la plus récente. Parce que dans ce cours, nous allons accélérer un peu les choses en ne prenant pas la peine d' écrire dans le code pour les préfixes des fournisseurs. Je vais toujours te montrer où les trouver, mais on va garder les choses très simples et à jour. Les navigateurs Web modernes n'ont plus besoin des préfixes du fournisseur que nous utiliserons dans ce tutoriel, alors assurez-vous d'avoir la version la plus à jour de votre navigateur. Enfin, fur et à mesure que vous allez, assurez-vous de copier ce qui pourrait pennyroyal pour chaque exemple et de le coller dans votre projet de classe , car nous reviendrons sur certains d'entre eux plus tard dans le cours. Si votre navigateur est à jour, tout prêt à commencer à animer quelques pages, commençons. 3. Animer les bouts, arrière-plan et le texte: Très bien, plongons et commençons à animer cette page Web. Comme vous pouvez le voir, c'est une page Web super simple. Juste peu appelé l'action avec ce bouton. En ce moment, ça ne fait rien. Alors habillons un peu. Hum, on va aller de l'avant et sauter dans les gens du code. Et la première chose que vous allez faire est de faire une copie de ceci pour que vous puissiez enregistrer vos modifications. Revenons-y si vous voulez y faire référence plus tard. Alors, où se trouve la fourchette de clic ici ? On n'a pas vraiment besoin de s'inscrire, alors disons que les sauvegardes anonymes. On n'a pas vraiment besoin de s'inscrire, Si vous avez un compte, vous pouvez vous connecter et ou si vous voulez tamponner, vous pouvez certainement le faire. Mais tu n'as pas à le faire. Désolé de vous faire ça. Et maintenant, juste pour que nous puissions revenir à cette page plus tard, nous allons aller ici et copier l'URL. On va commencer un projet. Mettez votre titre. On va juste dire l'exemple 1 et la paix juste là. Bon, maintenant que nous avons fait ça, parlons de la façon dont nous voulons animer ça. Je pense que ce serait plutôt cool si ce bouton change de couleur quand on l'a dessus. Je pense que ce serait plutôt cool si ce bouton change de couleur quand on l'a dessus Bon, donc nous allons voir que l'effet plus lourd est maintenant appliqué quand nous avons un lapin. Alors comment on va vraiment animer ça pour qu'il ne passe pas juste à l' autre couleur ? Nous voulions vraiment s'estomper à ce bleu. Donc, si vous faites glisser sur le travail d'un panneau de script, vous verrez que j'ai suivi ce lien pour vous les gars. Ouvrons ça maintenant à propos des liens. Je vais nous emmener sur le site Web des trois écoles. C' est un orteil de référence super utile. N' importe lequel de vos CSS html JavaScript etcetera a besoin ici. On regarde juste la propriété de transition. Euh, et avant que tu en parles trop, je veux juste faire une petite note. Dans ce cours, nous n'allons pas utiliser de préfixes fournisseur comme Web get mas. Hum, mais prends note de ça. Si vous voulez prendre en charge les anciennes versions de ces navigateurs, alors vous allez certainement vouloir les inclure lorsque vous implémentez cela sur vos propres sites Web. Alors gardez cela à l'esprit Voyons cela dans le domaine de l'impôt maintenant. Nous avons donc cette transition et nous voyons que nous pouvons passer dans une fédération de propriétés, une fonction de resserrement, un délai et, bien sûr, héritage initial. Donc, en termes d'animation de la couleur de fond, je pense que pour l'instant, nous allons simplement tenir avec la propriété dans la durée et nous pouvons parler de quelques-unes des autres utilisations plus tard. Ok, alors revenons et ajoutons la propriété de transition à notre bouton. Et nous devons en fait ajouter cela à la classe de bouton et non au bouton. Avoir sa classe parce que vous ne pouvez pas transmettre cette propriété de transition en même temps, vous modifiez l'effet réel que vous voulez faire. Alors allons de l'avant et définissons la transition vers la propriété de la couleur de fond. Et faisons-le une seconde. Nous pouvons l'avoir maintenant, et nous voyons que maintenant il fait ce changement progressif du blanc au bleu. Rendons ça un peu plus vite. Changez-le pour pointer vers, et maintenant c'est un effet beaucoup plus rapide. Donc, nous avons aussi cette fonction de synchronisation, et fondamentalement, vous pouvez passer dans beaucoup de choses différentes à cela. Défilons vers le bas et vous pouvez voir que nous avons un tas de choses comme la facilité, la facilité dans , l'aisance maintenant, restons simplement avec facilité. Et si on ralentit à nouveau, vous remarquerez que ce n'est pas juste, ah, ah, une transition en douceur. Maintenant, il accélère en fait au milieu et ralentit au début et à la fin un peu. Alors, changeons ça en arrière. Et maintenant que vous avez ceci implémenté, je remarque qu'une chose qui semble bizarre est que la couleur de la police ne change pas. Donc c'est bien. Ou avoir sa classe et ajouter juste cette couleur de poids qui semble beaucoup mieux. Mais une chose que vous remarquerez, surtout si on le ralentit, c' est que le texte est en fait juste claquer tout de suite. Il n'est pas animé comme le reste du bouton, donc une chose que nous pouvons faire est de transmettre une nouvelle valeur à cette propriété. On peut dire la couleur. Gardez-le deux secondes. Ease a changé ce retour à 0.2 et vous pouvez voir qu'ils animent tous les deux ensemble. Mais c'est beaucoup de revêtements répétés, et nous ne voulons évidemment pas le faire plus que nous ne devons jamais le faire. Alors regardons d'autres façons. Tu peux le faire. Vous pouvez réellement passer, oh,en oh, tant que propriété, et qui cible chaque propriété animée possible qu'un élément peut avoir et les anime. Et vous voyez que maintenant ça marche toujours. Les deux sont animés en même temps. Enfin, parlons de la dernière valeur peut le passer à la transition, et c'est le retard. Alors asseyons-nous un délai de 0,2 seconde. Et maintenant, nous allons voir que lorsque nous survolons ce bouton, il sélectionne en fait une seconde avant que l'animation ne le donne. Nous verrons dans les prochains exemples comment cela peut être vraiment utile, et c'est tout. Vous avez fini avec le premier exemple. Vous pouvez continuer à jouer avec ce code un peu si vous le souhaitez, ou vous pouvez plonger directement dans la leçon suivante. 4. Prenez un moins d'espace avec les effets de survol d'images: d' accord. Donc, pour un deuxième exemple, vous pouvez voir que nous avons cette page de produits et chaque produit a une image. Et puis un peu de description et un bouton d'achat. Et fondamentalement, si nous avions un tas de produits sur cette page, cela commencerait à prendre beaucoup de place. Nous voulons donc le condenser de sorte que nous ne voyons que les images au début. Et quand on l'a sur les images, on voit les descriptions et ça par bouton. Alors regardons comment nous pouvons le faire, bien que d'une manière ou d'une autre, nous allons avoir besoin de contenir la description à l'intérieur de cette image et vous pouvez voir le dans le HTML que nous avons réellement mis en place pour que l'image du produit et la description du parc soient à la fois à l'intérieur de cette classe de pouce. Donc, d'abord, allons-y et nous allons définir la classe de pouce pour avoir une hauteur de 250 pixels, et nous allons mettre la grippe sur cachée. Vous pouvez voir maintenant que nous ne pouvons pas voir cette description, elle est cachée en dessous de la coupure, donc en quelque sorte nous allons avoir besoin de faire en sorte que quand nous l'avons sur une de ces images , cette description Div apparaît et plane sur l'image réelle. Nous allons donc avoir besoin de positionner l'image du produit dans la description du produit. Et pour pouvoir le faire, nous allons vraiment vouloir mettre la position sur le pouce. Parce que si nous sommes en train de jouer avec le positionnement absolu sur les, classes enfants étaient en fait obtenir les ish des gens, les invitant par rapport à l'ensemble du document plutôt qu'à cela un jour. Si c'est le cas, évitons cela en définissant la position ici sur relative. Donc, nous savons que nous allons faire un certain positionnement à la fois sur l'image du produit et sur la description du produit . Donc, plutôt que d'ajouter cet attribut absolu de position aux deux classes, ajoutons-les aux produits. Donc on va dire, Product, ils auront tous les deux une position d'absolu. Nous savons aussi que nous allons vouloir garder notre taux de position d'image là où il est. Donc, définissons parler 20 pixels. Mais nous allons également avoir besoin de définir où la description est la cause En ce moment, la description est cachée derrière cette image de produit avec un haut de zéro également. Donc vous vouliez vraiment être hors de la page. Alors donnons-lui une valeur de 250 pixels. Et comme vous vous en souviendrez probablement, c'est juste en dessous où le pouce se coupe. Alors comment on va y arriver ? Donc, lorsque nous survolons ces images se déplace vers le haut et que la description monte pour prendre sa place, Eh bien, vous avez peut-être deviné que nous allons utiliser un peu de vol stationnaire et ciblons l'image. abord, on va dire image et on va juste mettre le top à 250 correctifs SLA négatifs. Donc maintenant que nous avons fait ça, nous voyons quand nous l'avons terminée, ces images sont retirées de l'écran. Mais les descriptions ne s'affichent pas, donc le désherbage pour réparer ça aussi bien. Et on va juste définir les 20 meilleurs pixels maintenant les descriptions qui apparaissent quand on aura. Donc c'est bien. Mais comment on va animer ça ? Nous savons déjà à propos de la propriété de transition, mais coulons très rapidement sur l'endroit où nous voulons ajouter ceci à Were Anna rencontre l'image et la description, mais ça va être une sorte de douleur de passer dans cette propriété de transition à la fois revenons simplement à cette classe de produits où vous avez défini la position toe absolue. Et ajoutons une transition là et la propriété, nous sommes en transition en haut. Mettons-nous à ça. Donnons-le une seconde et réglons l'assouplissement pour faciliter. Et maintenant, quand nous avons sur ceux où les choses, ils glissent tous les deux ensemble. Mais ça a l'air un peu bizarre. Je voulais vraiment ressembler à la description glisse en face de l'image du produit . Alors, comment pouvons-nous faire ça ? Eh bien, nous pourrions utiliser différentes propriétés de transition pour faire que cette classe de description se déplace plus rapidement que l'image du produit. Mais ce n'est pas très efficace d'ajouter cela à deux sélecteurs différents. Au lieu de cela, allons cibler l'image, et nous allons juste définir la valeur de délai de transition à 0,5 seconde, et maintenant nous voyons qu'ils s'animent séparément. Accélérons un peu les choses. Pour rendre cela un peu plus propre, la transition retardée nommer une seconde et définissons la transition supérieure à 0,6 seconde, et maintenant c'est beaucoup plus rapide, et vous pouvez réellement dire que cette description Div apparaît dans devant cette image. Dave. N' hésitez pas à continuer à jouer avec ce code si vous le souhaitez. Mais si vous êtes prêt, passons au troisième exemple. 5. Modes animés avec Pure HTML/CSS: Bon, commençons par l'exemple. Trois. Ça a l'air un peu familier, n'est-ce pas ? Si vous l'avez du bouton, vous pourrez voir qu'il s'agit de la même page que nous avons édité auparavant. Mais si nous regardons le HTML, il y a des choses différentes qui se passent ici. Il semble qu'il y ait en fait un formulaire sur la page quelque part. Réglons la visibilité deux visibles juste pour que vous puissiez voir à quoi ça va ressembler. Nous pouvons voir que nous allons avoir un email, une adresse, un nom, un bouton de soumission et le bouton de l'ACLU. Mais nous devons trouver un moyen de faire apparaître ce formulaire lorsque nous cliquons sur ce bouton. Alors, comment peux-tu faire ça ? abord, définissons ce H ref pour cibler notre def métal. Si vous avez déjà fait des liens de colère avant, c'est à peu près la même chose. Donc on a fait ça sans rien faire, parce qu'on va avoir besoin de mettre la forme trop visible quand elle est ciblée. Comment pouvons-nous faire ça ? Eh bien, il s'avère un peu comme stationnaire. Vous pouvez sélectionner la superposition de formulaire quand il est ciblé, et j'allais faire pour cela est de définir la visibilité trop visible, et maintenant nous cliquons sur le bouton, notre étranger apparaît, et quand vous cliquez sur fermer, il va loin. Maintenant que nous avons cette configuration, comment pouvons-nous faire pour que cela devienne un effet de transition ? Essayons de le mettre en place comme nous l'avons fait avec les autres exemples. Vous pouvez voir qu'il ne fait pas réellement cette transition, et la raison pour laquelle il ne le fait pas est parce que si vous y pensez, comment pouvons-nous vraiment passer d'une visibilité de visible à une visibilité de caché ? Quel est le pas entre leur CSS ne sait pas, donc nous devons vraiment lui donner quelque chose à l'ennemi. Et si vous savez quelque chose sur CSS, vous penserez probablement à la fonction A pass ity ici. Donnons donc notre capacité de superposition de formulaire par défaut de zéro. Et donnons à notre capacité de recouvrement de forme ciblée de quoi ? Et aucune femme ne clique sur le bouton. On verra. Il s'estompe en fait très cool, mais ce n'est pas tout ce que nous voulions faire. Nous voulons également faire glisser vers le bas lorsque nous cliquons dessus. Alors, comment peut-on faire ça ? Eh bien, abord, nous allons avoir besoin de définir cette classe de formulaire sur relative. Donnons-lui une position de relative et, disons, son état initial pour avoir un sommet de 300 pixels négatifs. De cette façon, c'est totalement à l'écran. Maintenant, lorsque ce formulaire est trop ciblé, nous allons vouloir changer le haut du formulaire et le définir à zéro pixels. Et puis nous allons juste ajouter une classe de transition à la forme. Maintenant, nous pouvons vous voir. Lorsque vous cliquez dessus, il glisse en fait vers le bas. Oui, monsieur. D' accord. Donc, vous avez terminé l'exemple. Trois. N' hésitez pas à vous embêter avec le formulaire un peu plus. N' oubliez pas de l'enregistrer dans votre projet et passons à notre dernier exemple. 6. Copycat : Transformer avec CSS: d' accord. Donc, pour notre quatrième exemple, je voulais essayer d'implémenter quelque chose que je pense vraiment cool à propos du code pin. Vous remarquerez que vous pouvez redimensionner ces zones, et lorsque l'une d'elles devient trop petite, le texte de l'en-tête apparaît, devient en fait plus petit et se déplace dans ce panneau de site. Donc, ici, nous avons juste une page Web vraiment simple avec une sorte de texte, et nous voulons faire en sorte que ce titre fasse la même chose que pourrait Pen faire lorsque la hauteur du navigateur devient trop petite. Alors réfléchissons à la façon dont on pourrait faire ça. abord, commençons par ajuster cette classe d'en-tête dans l'état final où vous voulez qu'elle soit, et pour ce faire, on utiliserait une nouvelle propriété appelée Transform. Si vous n'avez jamais utilisé transform auparavant, c'est en fait une propriété très pratique qui est extrêmement utile lorsque vous travaillez avec des animations. Gardez à l'esprit les préfixes du fournisseur, bien sûr, quand vous l'implémentez dans vos propres pages Web. Mais encore une fois pour cette classe, je suppose que vous avez le navigateur le plus à jour possible, celui que vous pouvez utiliser et transformer est pris en charge dans tous les navigateurs modernes à jour sans préfixes fournisseur. Alors nous allons juste entrer et commencer à l'utiliser. Il y a beaucoup de différentes valeurs possibles que nous pouvons transmettre. Il y a deux transformations D ainsi que trois transformations D, mais nous allons garder cela assez simple pour cet exemple. Donc, d'abord, passons et sélectionnons sont en tête, et nous allons juste commencer à appliquer des propriétés transformées à elle. Donc, d'abord, nous savons que nous voulons qu'il tourne vers le bas d'environ 90 degrés. Pour ce faire, nous pouvons simplement dire 90 le E G pour les degrés, et vous pouvez voir qu'il est déjà mis à jour sur la page en cours de rotation de 90 degrés. Mais quelque chose de bizarre se passe ici. Vous remarquerez qu'il tourne en fait au centre de cette image où, vraiment, si nous voulons qu'elle descende dans ce bit de côté ici, nous voulons réellement qu'elle tourne depuis le début de l'élément. Alors, comment pouvons-nous faire ça ? Il y a en fait une propriété que nous pouvons utiliser pour définir l'origine de cette transformation. Si vous travaillez tout dans des programmes comme Illustrator, vous savez probablement de quoi je parle quand je dis définir le point d'origine d'une transformation. Hum, mais sinon, on verra très bientôt ici. Alors allons de l'avant et appelons cette propriété d'origine de transformation, et nous allons la mettre au centre parce que nous voulons que la hauteur soit centrée. Mais nous voulons que l'aspect horizontal soit laissé. Et maintenant vous pouvez voir qu'il l'a effectivement déplacé dans le panneau latéral ici parce que là où il faisait la transition du centre, il est maintenant en train de passer du point le plus à gauche. Alors que les choix semble un peu hors de sa place là-bas, et aussi nous pouvons voir que ce haut sont ici montre toujours tout son espace. Et une partie de la raison de l'implémentation de cela est lorsque le navigateur hauteurs trop petites. Nous voulons économiser de l'espace. Alors allons de l'avant et définissons la hauteur de la tête un 20 pixels. Et maintenant de cette façon, les espaces ont été supprimés. Bon, donc on n'a pas fini de se transformer. Allons de l'avant et passons une autre valeur et compétence vers le bas ce petit peu de texte. ce moment. Il a une échelle de un et permet juste de régler sur une échelle de 0,5 et maintenant il est beaucoup plus petit. Donc, enfin, nous devons trouver un moyen de centrer ce texte ici. Évidemment, nous pourrions le faire avec un certain positionnement. Mais il y a en fait une fonction intégrée dans la transformation appelée translate. Et ce que cela fait est se déplace autour d'un élément par des valeurs horizontales et verticales, peu comme la position. Donc on va appeler, traduire, et on va passer. Disons juste 20 pixels pour commencer, et si nous les comparons zéro et 20, nous pouvons voir qu'il se déplace verticalement. Pour l'instant, nous voulons également le déplacer horizontalement, alors ajoutons 25 pixels négatifs. Maintenant, vous pouvez voir qu'il est un peu déplacé vers le haut , d' accord, donc maintenant le texte est centré horizontalement, mais nous voulons toujours que ce soit une sorte de ligne vers cette zone de texte ici verticalement. Changeons cela à 60, donc maintenant nous avons le titre défini à l'endroit où nous voulons qu'il aille lorsque la hauteur du navigateur est assez petite . Mais maintenant, nous devons réellement ajouter les valeurs par défaut. Alors faisons une requête multimédia, et nous allons dire que lorsque l'écran est plus grand que 400 pixels, nous allons apporter quelques modifications à chacun. Donc nous savons déjà que nous allons annuler la transformation que nous avons faite plus tôt dans le document. Et donc ce que nous pourrions faire est d'aller de l'avant et de copier tout cela et de le coller ici, mettre la rotation à zéro, régler l'échelle de l'orteil un et a dit que traduire à zéro. Et quand notre écran est assez grand, c'est là qu'il a commencé. Ou pour rendre les choses un peu plus simples, nous pouvons simplement définir la transformation à sa valeur par défaut et la même chose se passe. Donc aussi, nous avons remarqué que lorsque l'écran est assez haut, cette hauteur est toujours manquante. Alors allons de l'avant et à ce retour et nous pouvons faire la même chose ici et juste la hauteur initiale. Et maintenant, nous en avons entre ces deux états. Maintenant que nous avons cette configuration, nous pouvons faire quelque chose qui se sent probablement un peu familier pour, vous savez, et ajouter une transition à chacun. Donc nous allons faire la transition de toutes ces propriétés qui étaient en train de changer. Donnons-lui 0,38 seconde pour faire ça. Laissons ça se calmer. Maintenant. Nous voyons une partie de cette fonctionnalité qui pourrait épingler a. Je veux vraiment le faire ressembler quand cela change que les zones de texte glissent réellement haut. Donc, pour ce faire, jouons avec le rembourrage autour de ce groupe de formulaires ici. Donc, allons prendre ceci hors du code de ne pas le faire et le déposer avant une requête multimédia. Et ce que je veux faire, c'est quand les choses se sont effondrées comme ça. Je veux nous que ce rembourrage supérieur à zéro et laisser le tapotement de 20 pixels sur le fond sur le côté pour que ce soit agréable à la place comme ça. Mais quand il est élargi que le caressage à l'arrière, c'est maintenant. On a ce bel espace quand on l'a, et quand on ne le fait pas, il s'effondre. Ajoutons une transition de cela pour qu'il ressemble à des zones de texte qui glissent vers le haut. Donc on va juste dire transition Patty, Prenons 1/2 seconde et dit que c'est facile. Et maintenant, ça va ressembler à ce que cette boîte glisse dans le foutue ! Basé sur ce texte en mouvement. Là vous allez, vous avez terminé Exemple pour le. C' est la fin des exemples officiels. Mais si vous voulez jouer avec ça un peu plus, nous allons en fait parler un peu de cette facilité à laquelle nous avons réglé toutes vos transitions. Et quelques façons nous pouvons réellement jouer avec ça pour obtenir des effets vraiment accrocheux. Donc si vous êtes intéressé par cette tête à la section suivante, euh, mais sinon, n' hésitez pas à passer à la conclusion. 7. Vous êtes d'animations avec Cubic Bezier !: Bon, revenons à notre troisième exemple et parlons un peu de cette valeur de facilité que nous avons passée en transition. Fondamentalement, si vous avez déjà utilisé un programme comme Aftereffects avant, vous reconnaissez probablement une courbe occupée et une transition. A cette capacité à tous ceux que nous définissons facilité étaient en fait spécifier l'une des rares bordures A occupées prédéterminées dans CSS. Et c'est de la facilité ici. J' ai la facilité et juste une transition linéaire régulière mise en place. Regardons comment ils comparent, euh, sur deux secondes. Comme vous pouvez le voir, ils prennent deux secondes pour arriver au point final. Mais avec la facilité, il accélère au milieu et ralentit à la toute fin. Donc, en fait, à certains égards, il semble qu'il bouge plus vite. Maintenant, nous pouvons faire beaucoup de choses vraiment cool avec cela et juste vraiment jouer avec elle pour que nous puissions définir des valeurs folles comme celle-ci où il est en fait plus de tourner sa transition un peu. Nous pouvons le faire arrêter au milieu, mais pour notre exemple moyen, en fait, je voulais juste se dépasser un peu juste vers la fin. Alors regardons à quoi ça pourrait ressembler. Ouais, je pense que ce sera plutôt sympa. Donc maintenant, nous pouvons simplement copier tout ce texte saut dans notre exemple, et nous allons juste remplacer l'animation de formulaire par ce cube plus occupé. Et maintenant, quand on clique dessus, on peut voir qu'il est en fait plus de se tirer un peu cool. Il y a beaucoup de choses vraiment cool que vous pouvez faire avec cubique plus occupé, donc je me sens vraiment libre de jouer avec eux. 8. Étapes à suivre !: et c'est tout. Vous finissez le cours plus tard ce mois-ci, je vais en fait sortir la deuxième partie de ce cours, qui va vous présenter de nouveaux concepts cool comme des images clés, animer des graphiques vectoriels évolutifs et réutiliser des animations dans différents parties de votre page Web et même dans différents sites Web entièrement. Alors restez à l'écoute pour ça. Assure-toi de me suivre, et je te verrai alors.