Animate.css existe depuis quelques années maintenant et je dois avouer que je suis assez en retard pour la fête. Je l'ai découvert il y a quelques mois à peine, alors que je cherchais sur le net des tutoriels d'animation CSS, et que je trouvais ce qui devait être le moyen le plus rapide et le plus simple d'animer, Animate.css.
Créé par un gars du nom de Dan Eden, Animate.css est un moyen rapide de voir le fonctionnement de CCS et d’animer de l’animation sur votre site Web.
Décrit comme "Just-ajoute de l'eau CSS CSS" Animate.css est un peu amusant avec un côté sérieux. Il permet même aux concepteurs Web amateurs, tels que moi, de se familiariser rapidement avec les principes fondamentaux de l'animation CSS et de créer des effets simples mais efficaces pour les sites Web. D'un seul titre animé à des mouvements plus compliqués, cet outil peut le faire.
Animate.css
Animate.css est disponible au téléchargement depuis GitHub et constitue essentiellement une bibliothèque d’effets CSS simples rassemblés à un seul endroit. Chaque animation est bien emballée et prête à être utilisée. Tout ce que vous avez à faire est de trouver l'animation que vous aimez et d'appliquer la classe. C'est vraiment tout ce qu'il y a à faire.
Si vous ne le souhaitez pas, vous n'avez pas besoin de télécharger toute la bibliothèque, car elle contient 2 500 lignes de code. Vous pouvez visiter le site Animate.css, rechercher une animation et cliquer sur le lien Télécharger Animate.css. Il charge la classe sur une page Web que vous pouvez copier et utiliser à votre guise.
Il est cependant plus facile d’utiliser GitHub et d’avancer pour trouver l’effet recherché.
- Accédez à la page css GitHub.
- Cliquez sur le lien Source pour accéder à la liste des éléments.
- Sélectionnez le type d'effet que vous recherchez dans la liste. Bounce est un chercheur d'attention, sélectionnez donc le lien attention_seekers.
- Sélectionnez bounce.css.
- Copiez le code et placez-le sur votre page pour appliquer l'animation.
C'est aussi simple que ça. Vous choisiriez évidemment différentes options pour les différents effets, mais le résultat final est le même. Accès au code nécessaire pour faire le gros du travail sur la page.
Construire un objet animé avec Animate.css
Construire quelque chose de cool avec Animate.css est simple. C'est juste une question de trouver le code CCS et de l'ajouter à votre propre CSS. Si je peux le faire, tout le monde le peut!
La première option de la page Animate.css est "Bounce", nous allons donc l'utiliser dans cet exemple.
- Pâte ' ' à l'intérieur dans votre feuille de style.
- Recherchez le CSS correspondant à l'animation souhaitée et ajoutez-le à l'élément à animer. Par exemple, ajoutez ' 'pour ajouter cet effet de rebond à tester, une image ou autre.
- Ajoutez le code CSS suivant pour que tout fonctionne. Tiré du bounce.css ci-dessus.
@ keyframes bounce {
de 20%, 53%, 80% à {
animation-timing-function: cubic-bezier (0, 215, 0, 610, 0, 355, 1 000);
transformer: translate3d (0, 0, 0);
}
40%, 43% {
animation-timing-function: cubic-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transformer: translate3d (0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier (0, 755, 0, 050, 0, 855, 0, 060);
transformer: translate3d (0, -15px, 0);
}
90% {
transformer: translate3d (0, -4px, 0);
}
}
.bounce {
nom-animation: bounce;
origine de la transformation: centre du bas;
}
Poursuivre l'animation avec Animate.css
La séquence ci-dessus ajoute un effet de rebond lors du premier chargement de la page, ce qui est cool mais ponctuel. Pourquoi ne pas l'ajouter au vol stationnaire? De cette façon, chaque fois que quelqu'un survole le test, il rebondit. Ce n'est pas quelque chose que je ferais sur un site de production, mais c'est un excellent moyen de montrer comment tout fonctionne.
Ajoutez le code suivant à votre CSS pour ajouter l’effet de rebond sur le survol. Chaque fois que la souris survole l’élément, elle doit rebondir.
.animated: vol stationnaire {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-durée: 1s;
-webkit-animation-fill-mode: les deux;
-moz-animation-fill-mode: les deux;
-ms-animation-fill-mode: les deux;
-o-animation-mode-de-remplissage: les deux;
animation-fill-mode: les deux;
}
Si vous connaissez CSS, vous saurez beaucoup mieux que moi comment implémenter différents effets pour différentes actions. En tant que débutant, ceci et les bibliothèques fournies dans Animate.css m'aident à créer des animations de base, mais efficaces, pour mes pages Web.
Je ne sais pas combien j'en utiliserais sur un site Web en direct, car ils ne vont pas toujours très bien et les utilisateurs mobiles ne semblent pas les aimer beaucoup du tout. Cependant, pour mieux comprendre le fonctionnement de CSS et son utilisation pour améliorer le Web, c'est une excellente ressource. Je ne suis qu'un débutant, mais même passer quelques heures avec Animate.css pour ce tutoriel m'a beaucoup appris. Je pense que je vais jouer avec beaucoup plus avant que j'ai fini. Et vous?
