Sur ma liste de lessives d'articles à faire que je ferai un jour? C'est l'idée de créer une bibliothèque prédéfinie d'animations CSS utiles. La mauvaise nouvelle est que je n’aurai probablement jamais vraiment le temps de le faire. La bonne nouvelle est que le développeur Dan Eden m'a battu.
Aujourd'hui, nous allons tester Animate.css, une collection impressionnante et gratuite d'animations CSS que vous pouvez appliquer à vos projets presque sans effort. C'est un plaisir de jouer, alors continuez et amusez-vous.
Qu'est-ce que Animate.css?
La manière dont Animate.css est construit n'a rien de révolutionnaire ou de spécial. Si vous savez utiliser CSS, vous savez comment l'utiliser. Il s'agit simplement d'un ensemble d'animations d'images clés prédéfinies et intégrées à certaines classes. Si vous souhaitez utiliser l'une des animations, vous appliquez la classe. C'est tout!
Si toutes ces transitions étaient extrêmement simples, cet utilitaire pourrait ne pas valoir votre temps. Il s’agit toutefois d’animations complexes, soigneusement construites et entièrement personnalisables. Si vous envisagez d'utiliser des images clés à n'importe quel niveau, Animate.css pourrait vous faire gagner beaucoup de temps.
Je ne veux pas de cours puants
La police avec un minimum de balisage est prête à se faire arrêter à ce moment-là. Qui veut encombrer son code HTML avec un tas de cours supplémentaires? Pour les besoins de ce tutoriel, nous allons nous en tenir à cette méthode, mais si vous n'approuvez pas, il est assez facile de simplement copier et coller le code d'une animation dans un crochet sémantique.
De plus, à la fin de cet article, je vous montrerai un itinéraire alternatif qui vous permettra de supprimer le supplément en utilisant notre bon ami Sass @extend.
Créer une construction personnalisée
Vous avez deux options pour télécharger Animate.css. Vous pouvez tout récupérer dans Github (bon pour expérimenter) ou créer un téléchargement personnalisé qui ne comprend que les effets dont vous avez besoin pour le projet spécifique sur lequel vous travaillez (bon pour une utilisation réelle).
Un bon conseil sur la page de construction personnalisée, essayez de survoler chaque étiquette d'animation. Il vous montrera exactement ce que l'animation fait pour que vous puissiez décider de l'inclure ou non.
Le téléchargement
Si vous choisissez de télécharger tout comme je l'ai fait, vous obtenez un gros fichier CSS contenant toutes les classes d'animation et un dossier contenant des fichiers CSS individuels, chacun contenant une animation.
Vous pouvez facilement sélectionner un fichier CSS spécifique si vous souhaitez appliquer une seule animation, tout en sachant qu'il ne sera pas autonome. Comme nous le verrons, il y a un? Animé? classe dans le gros fichier dont vous aurez besoin pour que tout fonctionne.
Construire une démo rapide
Maintenant que nos fichiers sont téléchargés, il est temps de comprendre comment utiliser ce mauvais garçon. Nous aurons toutefois besoin de quelque chose pour le tester, alors construisons une galerie d'images rapide. Vous n'avez pas besoin de tout mettre en œuvre, mais de lancer des images dans une div, de les styler légèrement et de les faire flotter à gauche.
HTML
Ne pas vraiment aller les noix
Les conseils ci-dessus sont principalement à des fins de test. Lorsque vous lancez les pneus d'Animate.css, soyez encouragé à creuser et à tout essayer. Toutefois, si vous envisagez de l'intégrer à un véritable flux de travail, vous devez garder à l'esprit beaucoup de choses.
Premièrement, pensez au support du navigateur. Les animations d’images clés sont enfin prises en charge dans IE 10, mais rien en dessous. Cependant, selon CanIUse, ils fonctionnent bien dans presque tout le reste: Safari, Chrome, Firefox, Opera et même dans certains navigateurs mobiles tels que ceux conçus pour Android et iOS. Étant donné le manque de prise en charge d'IE, gardez vos animations strictement dans la catégorie bonbons et ne comptez pas sur elles pour structurer vos interactions, sinon vous allez laisser de nombreux utilisateurs.
Ensuite, considérez le fait que les animations d'images clés peuvent être des actions assez lourdes qui gâchent vraiment l'expérience utilisateur si vous allez trop loin. Faites preuve de retenue et effectuez de nombreux tests pour voir comment la page fonctionne sur différentes plates-formes.
Le mélanger avec sass
En regardant par-dessus Animate.css, je me retrouve à vouloir réécrire le tout dans Sass. Je ne peux pas m'empêcher de penser à la manière la plus concise et facile à mettre en œuvre d'utiliser la magie des pré-processeurs. L'ensemble de la bibliothèque pourrait être construit de la même manière que Compass, ce qui rendrait la mise en œuvre d'un effet aussi simple que d'appeler un mixin.
En attendant, puisque Sass se mélange parfaitement avec du CSS simple, vous pouvez toujours vous donner un coup de fouet à vos fonctionnalités sans rien réécrire. La clé ici est d'appliquer les animations en utilisant @extend, ce qui élimine le besoin d'implémenter des classes supplémentaires dans votre balisage. Considérer ce qui suit:
Ici, j'ai créé quelques classes de boutons simples et exploité la puissance de Sass pour les faire rebondir en vol stationnaire. Le résultat sera DRY CSS vide de répétition. Je pense que Sass est fantastique pour des choses comme celle-ci, il montre vraiment l'utilité des pré-processeurs.
Qu'est-ce que tu penses?
J'ai eu beaucoup de plaisir à jouer avec Animate.css. Je ne sais pas combien je vais l'utiliser à l'état sauvage, mais je suis très reconnaissant à Dan Eden d'avoir pris le temps de le préparer et de l'offrir gratuitement.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez.Êtes-vous étonné de la distance à laquelle CSS s'est aventuré sur le territoire de l'utilisation de jQuery? Est-ce une bonne idée ou devrions-nous laisser ce genre de choses à JavaScript? J'aimerais entendre vos opinions.