Animation CSS

Une animation permet à un élément de changer de style de façon progressive.
Vous pouvez modifier autant de propriétés CSS que vous le souhaitez, autant de fois que vous le souhaitez.
Pour utiliser l'animation CSS, vous devez spécifier des images clés pour l'animation (keyframes).
Ces images clés contiennent les styles que l'élément aura à certains moments.

1) paramétrer l'animation

animation-name :
Donner un nom à l'animation pour pouvoir y faire référence dans les keyframes

animation-duration :
Cette propriété définit la durée d'un cycle de l'animation. animation-duration: 0s;
La valeur par défaut est égale à zero secondes : l'animation ne se déclenche pas.
Indiquez la valeur en secondes animation-duration: 1.2s;
Ou en millisecondes : animation-duration: 2400ms;

2) définir les keyframes
Exemple 1 : animer une propriété CSS
Ci-dessous le code CSS de l'animation :
.anim1 {
  animation-duration: 1s;
  animation-name: a1;
}

@keyframes a1 {
  from {
    margin-left: 0%;
  }

  to {
    margin-left: 100%;
  }
}

Le code HTML :
<button id="b1">Lancer l'animation</button> 
<div style="position:relative; height:50px; width:400px; border:1px solid #ccc; ">
<div id="anim1" style="background:#337AFF;height:50px;width:50px;position:absolute;"></div>
Exemple 2 : maintenir l'état final de l'animation
Ci-dessous le code CSS de l'animation :
.anim2 {
  animation-duration: 1s;
  animation-name: a2;
  animation-fill-mode: forwards;  /* --- Pour maintenir l'état de l'animation en fin de timeline --- */
}

@keyframes a2 {
  from {
    margin-left: 0%;
  }

  to {
    margin-left: 100%;
  }
}
Exemple 3 : animer plusieurs propriétés css
Ci-dessous le code CSS de l'animation :
.anim3 {
  animation-duration: 1s;
  animation-name: a3;
  animation-fill-mode: forwards; 
}

@keyframes a3 {
  from {
    margin-left: 0%;
  }

  to {
    margin-left: 100%;
    background-color: #27ae60;
    width:20px;
  }
}	
La doc Vue.js
A propos

J'exerce depuis plusieurs années le métier de développeur Front-End. Dernièrement j'ai créé ...

Qui suis-je
Qui maîtrise Internet, maîtrise le monde
Jules Cesar