Animations CSS3 avec les transitions et les transformations

1. Introduction: Salut, tout le monde. Je suis Kirsten Swanson. Je suis actuellement développeur Fernand. Apportez le dossier. Et je suis vraiment excité d'être ici sur encore partager pour vous apprendre sur les animations CSS. D' abord, laissez-moi vous faire une petite introduction sur moi. J' ai commencé le marketing et en tant que premier cycle et juste après avoir terminé, je voulais explorer le monde et voyager. J' ai donc fini par enseigner l'anglais en Corée du Sud pendant deux ans. Quand je suis revenu aux États-Unis, j'étais technicien d'ingénierie dans le puits, il a demandé à l'industrie Avec le ralentissement du pétrole un prix dans environ comme 2015, j'ai décidé d'explorer nouveaux chemins de carrière. Je voulais juste quelque chose de plus stimulant et créatif. Et c'était quand je faisais de la randonnée avec une amie et qu'elle m'a parlé de codage des camps de bottes . Au début, j'étais vraiment hésitant, et j'ai juste besoin d'ajuster l'eau. J' ai donc fini par suivre des cours gratuits en ligne, et j'ai fini par tomber amoureuse de Cody, en particulier CSS. Donc ça m'a fait rouler dans un camp de démarrage de codage appelé Torreon School of Software and Design et pas pour le Colorado. Je me suis inscrit à l'avant et pervers qui a mis l'accent sur le design et l'interface utilisateur En 2017 je suis diplômé. Et je dois être honnête, c'est la meilleure décision que j'ai prise pour changer Curb Pass. Alors maintenant, je suis heureux de partager mes compétences et ma passion de CSS avec vous les gars. Ce cours va être sur CSS trois animations. Il n'inclut pas une animation lourde avec mon frère et vous ne savez même pas drop script. Mais vous avez besoin de connaître les bases de CSS. Alors commençons et amusez-vous. 2. Aperçu du projet: pour votre projet de cours, vous allez créer un collage interactif d'icônes animées. Vous choisissez votre propre arrière-plan ainsi que des icônes, donc lorsque vous survolez les icônes, il y aura une sorte d'animation. Une bonne ressource est pour le dos. propres images sont sur splash. Il s'agit d'une grande galerie de photos en stock ainsi que de pixels, puis pour les icônes. J' aime utiliser des icônes plates aussi bien que je peux la trouver. Je vais également inclure un dépôt dans le plan de leçon, et cela inclura dans chacun de mull Pile Vous pouvez voir ici. C' est là que vous allez insérer vos images, puis aussi une élégante elle. Et c'est là que vous positionnerez vos icônes. Positionné absolu. J' ai hâte de voir vos projets terminés à la fin de ce cours. Ok, commençons et apprenons à propos des animations CSS. 3. Aperçu des animations CSS: ce cours est sur CSS trois animations avec des transitions et des transformations. abord, je vais vous donner un large aperçu des trois animations CSS, puis j'irai sur les transitions, puis les transformations. Et enfin, on va faire un revêtement de vie. Après cela, votre projet fera vos propres innovations. Donc, d'abord, CSS trois innovations apportent beaucoup de valeur à vos interfaces. Ils peuvent fournir une rétroaction visuelle qu'ils rendent délicieuse. Les micro-interactions peuvent généralement devenir des interactions mémorables pour les utilisateurs. CSS trois animations modifieront l'apparence ou le comportement de l'élément four lorsque son état change, sorte que cela pourrait être sur comme un hover ou focus ou un état actif. Les animations doivent être simples dans des mouvements subtils. Ils devraient être des animations cohérentes, et ils devraient améliorer l'expérience utilisateur et ne pas en distraire. Voir aussi les utilisations. Trois animations sont géniales car elles n'ont pas besoin de script Java ou d'une bibliothèque d'animation. Voici quelques tableaux de Puis-je utiliser le site Web dans ? Cela montre simplement que CSS trois transitions et transformations sont supportées à juste titre dans plusieurs navigateurs 4. Description des transitions: Donc, d'abord, je vais passer en revue les transitions, et il fait des éléments en douceur et progressivement changer sur une durée spécifiée. Donc, si vous n'avez pas de transition sur un élément quand il est transformé, cela changera brusquement. Ce ne sera pas une transition en douceur, donc généralement, lorsque vous avez une transformation, vous aurez une transition. Il y a quatre propriétés de transition. Il s'agit de la transition, la transition immobilière, la durée, du temps de transition et de la fonction en transition. Retarder un juteux le premier à l'air nécessaire pour les transitions. Les deux autres sont nécessaires. Pour une transition vers le travail, vous pouvez soit redresser chaque propriété individuellement, soit utiliser le raccourci, ce qui est recommandé pour un code plus rapide et plus propre. 5. Propriétés de transition: Maintenant, nous allons parler des propriétés de transition individuelles, donc le premier 1 qui est requis est la propriété de transition, et le spécifie la propriété à transitioner. Donc, disons, si vous voulez la couleur de bordure ou la couleur de Baccarin, c'est là que vous le spécifiez. Sinon, si vous mettez la valeur de tous, alors vous modifiez toutes leurs propriétés qui pourraient être animées. Voici en fait une liste de toutes les différentes propriétés qui peuvent être animées, sorte que vous pouvez voir qu'il s'agit d'une liste assez grande. Suivant est une durée de transition, et a spécifie la durée de la transition, et cette valeur est écrite en secondes. La fonction de synchronisation de transition spécifie la vitesse de la transition sur la durée. Par défaut, il est réglé à l'aise. Les autres options incluent la facilité linéaire dans la facilité de sortie. Il est dans le cubique plus occupé cubique vous permet de définir votre propre courbe de synchronisation. Alors regardons cette feuille de triche pour vous montrer à quoi ça ressemble. Donc, ici, ces différentes cubiques d'air fait oreilles. Vous pouvez voir que les délais de transition sont tous différents. Si vous vouliez obtenir le code réel, alors vous pourriez cliquer dessus et ensuite nous chaque année, vous pouvez voir que c'est la fonction de synchronisation réelle dont vous auriez besoin. Donc ce serait comme si tu étais dedans ou qu'il était sorti. Le dernier est le délai de transition, et cela spécifie quand la transformation démarrera par défaut. La transition commence dès que le changement d'état sur l'élément est déclenché. Donc, disons que si vous passez la souris sur un élément en survol, il va être déclenché tout de suite, mais vous pouvez mettre un retard dessus, et il serait déclenché tout de suite. 6. Transformer la description: nous allons maintenant parler de transformations. C' est quand un élément se déplace ou change et l'apparence. Les principaux types de transforme notre rotation, l' échelle biaisée et traduire. Rotate est lorsqu'un élément tourne dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre, ce qui est spécifié par le nombre de degrés. Skew est quand une inclinaison d'élément basée sur les valeurs fournies sur les axes X et Y. Ceci est également spécifié par le nombre de degrés. échelle est un dans l'élément augmente ou diminue, et c'est par un entier basé sur la hauteur et la largeur de l'élément. Traduire est lorsqu'un élément se déplace vers la droite, vers le haut ou vers le bas, et ceci est spécifié par des pixels. Vous pouvez combiner plusieurs transformations afin d'avoir un élément qui se traduit et fait pivoter . Enfin, origine de la transformation est séparée de la propriété transformée mais peut être utilisée conjointement avec elle pour spécifier l'emplacement. Origine de la transformation 7. CSS & Property Review: avant de passer au revêtement de vie. Examinons simplement les sélecteurs et les propriétés CSS, sorte que vous avez votre élément. Il pourrait s'agir de votre balise P ou de votre balise d'en-tête ou de votre div. Ensuite, vous avez votre propriété, qui va être votre bordure de couleur de fond, puis vous avez les valeurs spécifiées ici. Donc, quand nous parlons de transitions et de transformations, ce seront nos propriétés. Donc, ici, dans une transition, vous le spécifierez comme votre propriété. Et puis ce seront les valeurs pour une transformation. Vous spécifierez. Voici la propriété, puis les différentes valeurs peuvent être pivotées. Vous traduisez ou mettez à l'échelle afin de pouvoir voir visuellement l'état d'un changement d'élément. Nous allons utiliser la pseudo classe hover, donc nous allons mettre ceci à la fin de l'élément. Donc, vous avez l'élément qu'un deux-points que le survol. Ensuite, vous avez votre propriété et ensuite votre valeur. Ainsi, par exemple, il y a une classe de lien dans. Si vous avez ah, survolez la pseudo classe dessus, il va devenir bleu lorsque vous pointez dessus. Maintenant, passons à autre chose et faisons un revêtement de vie 8. Exemples de transition: OK sur le revêtement en direct. J' utilise l'adaptation ici. C' est un éditeur en ligne gratuit trouvé dans votre navigateur, donc nous allons d'abord parler de transitions, sera d'utiliser le carré et de mettre l'animation dessus. Donc, d'abord, ajoutons la pseudo classe de survol pour que nous puissions voir quand l'état change. Que diriez-vous de faire changer la couleur de fond ? Eh bien, dis à un joli violet, mais vous pouvez voir quand vous passez la souris dessus. C' est un changement très brusque. Ce n'est pas lisse, donc c'est là que la transition entre en main. Donc, nous allons utiliser le raccourci de la transition parce que ça va vers ces codes plus propres et plus mous. Et si vous vous souvenez correctement, vous allez d'abord mettre la propriété lorsque vous mettez la fédération, puis la fonction de synchronisation et enfin, le délai. Il y a un ordre spécifique à cela, et vous voulez vous assurer que vous le faites dans le bon ordre. Donc, faisons une transition pour cette couleur d'arrière-plan spécifie dans la couleur d'arrière-plan ici parce que c'est la propriété que nous changeons. Et disons que nous voulons que ça prenne cinq secondes. Voyons ce que Bacca est que c'est maintenant une transition en douceur. Ça ne change pas si vite. Après les secondes de combat, on peut mettre une fonction de chronométrage. Mettons les clés, mon frère. Cela modifie l'apparence de la transition. Enfin, vous pouvez mettre un retard. Mettons un second délai, donc quand vous passez la souris sur le carré, il ne va pas changer de couleur tout de suite. Tu vois comment le violet n'a pas eu lieu tout de suite ? C' est parce qu'il faut une seconde de planer sur la place avant qu'elle ne change réellement. Ajoutons une autre propriété à ce carré. On va avoir une frontière, mais ça devient une bordure violette. Maintenant, nous voulons changer la frontière sur le vol stationnaire aussi. Changez ceci en vert. Ainsi, comme vous pouvez le voir, la bordure ne change pas en même temps que l'image d'arrière-plan. C' est parce que dans notre transition ne spécifiaient que la couleur de fond. Donc, comme nous changeons la frontière aussi, nous pouvons dire tout ici et les deux devraient changer en même temps. Maintenant 9. Ajouter des préfixes de vendeurs pour les navigateurs de grands navigateurs: Il y a tellement de propriétés différentes que vous pouvez changer. Mis à part juste la couleur, comme la liste que je vous ai montré plus tôt Ici, vous pouvez changer le avec le remplissage de marge élevée tellement de propriétés différentes que vous pouvez anime. En outre, lorsque vous utilisez des transitions et des transformations, vous voulez vous assurer d'ajouter les préfixes du fournisseur tels que Web Kit, Mozilla Opera et Internet Explorer pour les transformations, afin de prendre en charge les anciens navigateurs. 10. Exemple de rotation de transforme: Maintenant, nous passons à des transformations, ce qui, je pense, est la partie la plus amusante des animations parce que vous arrivez à changer l'apparence des éléments et vous arrivez à les faire bouger. Donc d'abord, je vais faire tourner, donc nous allons mettre une transformation sur les carrés. Will Roque huitième, Um, et les six, la valeur de degrés. Et si on faisait 50 degrés ? Donc, lorsque nous survolons, ces éléments tournent de 50 degrés et vous voyez, ce n'est pas une transition très douce, donc cela signifie que nous devons y mettre une transition. Donnons-lui une seconde. Vous pouvez voir maintenant que le mouvement est lisse. Disons que nous voulons aller dans le sens inverse des aiguilles d'une montre mettra un négatif sur ce degré. Et si on veut les faire dépenser très vite ? Mettons un plus grand degré là-dessus. C' est beaucoup de plaisir. 11. Exemple de pieu de transforme: la transformation d'inclinaison est similaire à la transformation de rotation et qu'elle prend des degrés comme la valeur sqest lorsqu'un élément est incliné en fonction des valeurs X ou Y données. Donc, les oeufs inclinés, ce sera biaisé en fonction de l'axe X. Mettons-le 10 degrés. Si c'est un nombre positif, ça va le dire à gauche. Si c'est négatif, il s'inclinera vers la droite. Maintenant avec ça. Q : Pourquoi cela va être incliné sur l'accès Pourquoi. Donc, si c'est un nombre positif, ça va se biaiser. Et si c'est négatif, ça va fausser inamical. Si vous spécifiez simplement l'inclinaison, l'élément sera en veille asymétrique en fonction de l'axe X. Mais vous pouvez également mettre aux EAU que tout ce que vous entendez est bien et il va incliner Berks 25 degrés sur l'axe X, puis 10 degrés sur l'axe Y 12. Exemple de échelle de transforme: tout comme la transformation biaisée, la transformation d'échelle peut être transformée sur les axes X et Y. Cette échelle prend une valeur d'un nombre, alors mettons le nombre pour voir ce qui se passe. Cet élément obtient deux fois la taille de sa taille d'origine, et vous pouvez également voir que ce changement n'est pas très lisse. Alors allons de l'avant et ajoutons une transition. CNN lui donnera une durée d'une seconde. Comme c'est très lisse. Ok, diriez-vous de rétrécir l'élément pour mettre la moitié de la taille de celui-ci. Que diriez-vous de changer la compétence sur l'axe X ? Et nous pouvons également le changer pour le pourquoi ou le raccourci ici, nous pouvons mettre cette valeur X dans la valeur Y, et l'élément sera changé sur ces deux axes. 13. Exemple de transforme: la dernière transformation que je vais discuter est la transformation de traduction. J' ai l'impression que cette transformation est utilisée beaucoup en vous. Je, par exemple, au total, citant et ou quelques commentaires de confirmation apparaissant. J' ai l'impression que beaucoup de fois nous avons beaucoup d'objets orteils éléments apparaissant dans l'écran. La transformation de translation déplace un objet vers le haut ou vers le bas sur l'axe Y ou vers la droite ou la gauche sur l' axe X. Alors jouons avec ce cercle juste ici. Nous allons le traduire X, et la valeur qui va ici est en pixels. Mettons donc 20 pixels, et cela va faire passer l'élément à droite. Vous pouvez voir que c'est un peu twitchy, alors ajoutons une durée inhibée de la transition des secondes frères beaucoup mieux et plus lisse. Ok, donc maintenant si nous obtenons cette chute votre négatif, l'élément ira à gauche. Maintenant, si nous traduisons pourquoi l'élément va monter et si c'est un nombre positif, l'élément va baisser. Vous pouvez également utiliser la version abrégée de Traduire dans. L' élément ira à droite. 20 pixels dans le bas 30 pixels. D' accord. Je pense que c'est un bon moment pour expérimenter tous ces cercles et nous allons aussi jouer avec la fonction chronométrage. Nous pouvons voir comment le mouvement de ces cercles peut être différent lorsque vous mettez une fonction de synchronisation différente. Donc on va bouger tous ces cercles quand tout le conteneur sera en vol stationnaire. Alors que diriez-vous de passer sur l'accès exact de 300 pixels ? Donc tous les cercles vont bouger 300 pixels ? Et comme vous pouvez le voir, ce n'est pas très lisse. Alors passons à tous ces cercles. En ajoutant cette transition, ce sera un plus lisse comme vous pouvez le voir, ils vont tous à la même vitesse. Mais mettons bien une fonction de chronométrage. Expérimentez avec les différents que nous avons. Mettons-le, nourrit. Il est allumé, il laisse dehors, il est et dehors, tu sais quand tu arrives à la fonction. Donc, ceux-ci rendent juste la vitesse des transitions différente. Alors voyons ce que ça fait. Maintenant. Vous pouvez voir que ces cercles se déplacent à des vitesses différentes. C' est à cause de la fonction de synchronisation que nous venons d'ajouter. Donc traduire est une transformation très puissante, et j'ai l'impression que nous pouvons l'utiliser beaucoup dans Êtes-vous I et vraiment amélioré l'expérience utilisateur 14. Combiner plusieurs transformations: n' oubliez pas, vous pouvez combiner plusieurs transformations ensemble. Vous allez les écrire en ligne comme ça sans un cynisme en les séparant. Mais rappelez-vous, vous voulez garder votre utilisateur final à l'esprit et améliorer son expérience plutôt que de les submerger comme ça. souris ici. Félicitations, Guides. Félicitations, Tu finis le cours. J' espère que vous serez créatif avec votre projet. Et j'ai hâte de voir votre travail terminé. Espérons que ce cours sur les animations CSS était perspicace et aller de l'avant. Nous serons en mesure de vous ajouter de délicieux moments. Je remercie encore d'avoir suivi mon cours, et j'espère que vous avez beaucoup appris.