# Animation CSS3 : la construction d’une animation

Les Animations permettent de modifier les valeurs de propriétés CSS plusieurs fois dans le temps, tel un scénario Flash. C’est en fait plusieurs transitions qui s’enchainent !

## Comment déclarer une animation ?

Il faut pour cela utiliser @keyframes, lui donner un nom, puis gérer les "étapes" en pourcentage à l’intérieur de cette déclaration. Lorsqu'ils sont employés, les mots-clés from et to correspondent respectivement à 0 et 100%.

Les animations CSS3 sont compatibles avec IE 10, Firefox 5, Chrome 4, Safari 4, Opéra 12 et sur iOS et Android 4. Cependant, pour pouvoir les utiliser, il faut préfixer toutes les propriétés ainsi que les étapes définies avec @keyframes.
Les navigateurs actuels supportent les keyframes sans préfixes.

## Objectif : modifier la couleur d'un div

Je clignote !

La boîte doit devenir rouge à la moitié de la durée totale de l'animation, pour revenir à sa couleur initiale à la fin de l’animation. Nous aurons donc trois keyframes : à 0%, 50% et 100%. À chaque étape nous indiquerons la couleur à atteindre avec la propriété background-color. L’animation est nommée monAnimation.

> `@keyframes monAnimation {
> 0% {
> background-color: blue;
> }
> 50%{
> background-color: red;
> }
> 100%{
> background-color: blue;
> }
> }
> `

## Les propriétés intéressantes

- animation-iteration-count : le nombre de répétition de l’animation. La valeur infinite permet de jouer une animation en continu.
- animation-direction : permet de jouer une animation en sens inverse (en fonction du cycle).
- animation-play-state : mettre en pause l’animation. En cours d’étude de suppression par le W3C.
- animation-delay : le temps avant que l’animation ne démarre.
- animation-fill-mode : conserver l’état de l’animation avant le début où après la fin de celle-ci.