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 y compris les propriétés qui doivent être animées.

@keyframes bidenda{
 0%{ 
   margin-left: 0px 
 } 
 50% { 
   margin-left: 50px; 
 } 
 100%{
   margin-left: -50px; 
 }
}

Et c’est après la définition du keyframes que l’habitude du CSS ordinaire se reprenne. Les propriétés et valeurs. Les animations CSS sont gérées avec les propriétés animation-*

#monElement {
 width: 25%;
 height: 6%;
 background-color: black;
 color: white;
 animation-name: bidenda;
 animation-duration: 500ms;
 animation-iteration-count: infinite;
}

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 pas nécessaire.

Animation CSS avec 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é.

<link rel="stylesheet" href="css/animate.min.css" />
<!-- vous pouvez aussi utiliser le CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

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

<!Doctype html>
<head>
  <meta charset="utf-8" />
  <title>Test des animations</title>
  <link rel="stylesheet" href="css/animate.min.css" />
</head>
<body>
  <div class="animated bounceInDown">
     Anime moi
  </div>
</body>

Tester ce code

Listes de nom des animations

Catégorisé:

HTML & CSS

Étiqueté dans :

,