CSS problème animation avec IE

Bonjour,

Sur mon site j'ai une animation qui fonctionne bien sous FF, Opéra et Chrome, mais pas sous IE. Quelqu'un pourrait-il me donner une solution pour y remédier ?

Mon code :

/* -------------------------- */
/* ------- NAVIGATION ------- */
/* -------------------------- */
/* Barre de navigation */
.barre_navigation {
	background-image: url(../images/pixel_gris.jpg);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	text-align: center;
	padding:
		/* en haut */ 0
		/* à droite */ 0
		/* en bas */ 1em
		/* à gauche */ 1em;
	clear: both;
}

/* Comportement de la barre de navigation au passage de la souris */
.barre_navigation:hover {
	/* Animation */
	animation: 
		/* Nom */ survol_barre_navigation
		/* Durée */ 0.5s 
		/* Position finale */ forwards;
	/* Adaptation Mozilla */
	-moz-animation: 
		/* Nom */ survol_barre_navigation
		/* Durée */ 0.5s 
		/* Position finale */ forwards;
	/* Adaptation Safari, Chrome et Opera */
	-webkit-animation: 
		/* Nom */ survol_barre_navigation
		/* Durée */ 0.5s 
		/* Position finale */ forwards;
}

/* Survol de la barre de navigation */
@keyframes survol_barre_navigation {
	from {}
	to { background-size: 100% 0; }
}

/* Survol de la barre de navigation */
/* Adaptation Mozilla */
@-moz-keyframes survol_barre_navigation {
	from {}
	to { background-size: 100% 0; }
}

/* Survol de la barre de navigation */
/* Adaptation Safari, Chrome et Opera */
@-webkit-keyframes survol_barre_navigation {
	from {}
	to { background-size: 100% 0; }
}

Et du coup je me pose aussi la question de la rétro-compatibilité avec les anciennes versions des navigateurs. Est-ce que cette animation sera bien rétro-compatible ? Merci d'avance.