Animation

Transitions

Une transition CSS se joue une seule fois entre l'état A et l'état B d'un élément, elle attend donc un événement pour se déclencher (:hover, class ajoutée en javascript...).

transition: color 0.5s ease-in 1s;

a {color:#FF9900;transition: color 0.5s ease-in 1s;}
a:hover {color:#FF0000;}
Propriété raccourcie des transitions CSS.
color est la propriété sur laquelle agir
0.5s est la durée en secondes de la transition
ease-in est la courbe d'animation
1s est le délai en seconde avant le début de la transition
transition: color .5s ease-in, width 1s ease-in;
Il est possible de combiner des transitions sur des propriétés différentes d'un même élément

Plus d'infos sur les transitions

Animations

Une animation CSS se déclenche au chargement de la page et peut être paramètrée avec des images-clés, des loops...

Elle s'active sur l'élément désiré et doit être définie plus bas dans le CSS par un

@keyframe
div {animation: monanim 4s ease-in-out 1s 3;}
Propriété raccourcie des animations CSS.
monanim est le nom au choix donné à l'animation
4s est la durée de base en secondes de l'animation
ease-in-out est la courbe d'animation
1s est le délai en seconde avant le début de l'animation
3 est le nombre de répétitions de l'animation
@keyframes monanim {
  0%   {padding-top: 0em;color:black;}
  50%  {padding-top: 2em;}
  75%  {color:red;}
  100% {padding-top:0em; color:black;}
}
Définition d'une animation CSS.
Il y a ici 4 images clés, la première à 0% est l'état initial
à 50% de l'animation (50% de 4s = 2s), le padding-top change
à 75% de l'animation (75% de 4s = 3s), la couleur change
à 100% de l'animation, tout revient à l'état initial
puis l'ensemble recommence encore 2 fois car on a demandé 3 répétitions en tout.

Plus d'infos sur les animations