# Animation CSS3 : la construction d’une animation

Les animations vont, comme les transitions, nous nous permettre de modifier la valeur d’une propriété progressivement mais en utilisant cette fois-ci des keyframes.

Nous allons pouvoir gérer le comportement des animations en CSS en définissant la durée d’animation, le nombre de répétition et le comportement de répétition.

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%.

Can i use @keyframes ?

## Objectif : modifier la couleur d'un div

Survolez-moi !

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.