Faciliter vos animations CSS3 avec Animate.css

Les animations en CSS semblent être un peu hors du cadre pour les débutants en CSS. La philosophie, la syntaxe, c’est complètement différent du CSS de propriété et valeur qu’on connait tous.

Animation en CSS3

Avec les animations en CSS, il faut commencer d’abord par définir les règles Keyframes, qui sont autrement dit, les phases de transitions que votre animation va devoir passer


Et c’est après la définition du keyframes que l’habitude du CSS ordinaire se reprenne. Les propriétés et valeurs.


Tester ce code

Se répéter dans le but d’apprentissage n’est pas mauvais mais dans un cadre professionnel n’est vraiment pas évident si ce n’est nécessaire.

Animate.css

Découvrez avec moi dans cet article animate.css, une petite librairie CSS qui regroupe plusieurs animations utilisable facilement avec l’appelle des classes CSS prédéfinies !

Installation

Tous ce que vous avez à faire c’est d’inclure le fichier animate.css dans le head de votre document HTML et le tour est joué.

Utilisation

L’utilisation est simple. Tous vos éléments ou balises HTML à animer doivent avoir deux classes.

  1. animated
  2. Le nom de l’animation que vous voulez utiliser, à retrouver dans ce lien

Exemple


Tester ce code

Listes de nom des animations

Ajouter un commentaire

Un commentaire

  1. Kouagou 8 septembre 2017
Plus dans HTML & CSS
auto complétion google
Système d’auto complétion avec HTML5 (Sans Javascript)

Voulez-vous faire un formulaire d'auto complétion avec HTML5 ? Dans cet article je veux vous présenter comment le faire sans...

invalide and valide
Verifier les données fomulaires HTML5 sans Javascript

Javascript,  un langage de programmation tout de même mais sa syntaxe fait souvent peur. Adepte de la programmation web qu'on...

Fermer