/*

http://www.alsacreations.com/tuto/lire/1299-timing-des-animations-et-des-transitions-en-css3.html


---------- ETAPES DE CREATION D'UNE ANIMATION ----------

1. Définir le nom de l'animation avec les keyframes :

 @-webkit-keyframes 'changerFond' {
	0% {
		background : #000;
	}
	50% {
		background : #F00;
	}
	100% {
		background : #000;
	}
}

2. Appliquer l'animation sur une propriété dans un sélecteur :

body {
	background : #000;
	
	-webkit-animation-name : changerFond;
	-webkit-animation-duration : 10s;
	-webkit-animation-iteration-account : infinite;
	-webkit-animation-timing-function : ease-in-out;
}


---------- PROPRIETES ----------

1. animation-name : abc;

2. animation-duration : 123s;

3. animation-timing-function : (voir les mêmes valeurs dans la partie transitions)
/ linear
/ ease-in
/ ease-out
/ ease-in-out

4. animation-iteration-count :
/ 1 (par défaut)
/ nombre
/ infinite

5. animation-direction : jouer du début à la fin, ou si une fois rendu à la fin, elle doit refaire l'animation en sens inverse
/ normal
/ alternate

6. animation-play-state :
/ running
/ paused

7. animation-delay : Cette valeur définira un délai d'attente avant le début de l'animation, ou dans le cas d'une valeur négative, l'avance que doit prendre l'animation avant de débuter
/ running
/ paused

8. animation-fill-mode : définit l'état de départ et de fin de l'animation
/ forwards : indique au navigateur de laisser l'élément dans sont état final lors de la dernière itération. (l'élément ne revient donc pas à son état initial)
/ backwards : indique au navigateur de placer l'élément dans son état définit au keyframe 0% au chargement de la page, même si un délais négatif est indiqué.
/ both : appliquera les deux valeurs précédentes.
/ none : indiquera au navigateur de styler l'élément selon son état à la première keyframe visible (dans le cas d'un délai négatif) et de ramener l'animation à la keyframe 0% après la dernière itération. Ceci est le comportement par défaut.


---------- PROPRIETES EN UNE SEULE LIGNE ----------

-webkit-animation: defilement 3s linear infinite alternate;
-moz-animation: defilement 3s linear infinite alternate;
-ms-animation: defilement 3s linear infinite alternate;
animation: defilement 3s linear infinite alternate;


---------- MANIERES DE CREER LES KEYFRAMES ----------

1. PAR POURCENTAGE (VALEURS RELATIVES)

@keyframes 'agir' {
	0% {
		propriété1 : valeur;1
	}
	x% {
		propriété1 : valeur2;
	}
	100% {
		propriété1 : valeur3;
	}
}

Valeurs relatives :
- 0% : début (obligatoire)
- x% : intermédiaire
- 100 % : fin (obligatoire)


2. PAR DESCRIPTEURS (VALEURS RELATIVES)

@keyframes 'agir' {
	from {
		propriété1 : valeur;1
	}
	x% {
		propriété1 : valeur2;
	}
	to {
		propriété1 : valeur3;
	}
}

Valeurs relatives :
- from : début (obligatoire)
- x% : intermédiaire
- to : fin (obligatoire)




*/

@-webkit-keyframes 'changerFond' {
	0% {
		background : #000;
	}
	50% {
		background : #F00;
	}
	100% {
		background : #000;
	}
}




body {
	background : #000;
	
	-webkit-animation-name : changerFond;
	-webkit-animation-duration : 10s;
	-webkit-animation-iteration-account : infinite;
	-webkit-animation-timing-function : ease-in-out;
}