CSS3: animation funziona solo su Firefox

[trez]

Ciao a tutti,
ho questo semplice codice che anima lo sfondo:

@-moz-keyframes onde-div {
	0% {
    	background-position: 0 0;
	}
	100% {
    	background-position: 100% 0;
	}
}


@keyframes onde-div{
	0% {background-position: 0 0; }
	100%{ background-position:100% 0; }
	}

#animate-area { 
	width: 200px; 
	height: 200px; 
	border-radius: 50%;
	border: 3px solid #CCC;
	background-image:url(onde3.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;

	animation: 5s linear 0s normal none infinite onde-div;
	-webkit-animation: 5s linear 0s normal none infinite onde-div;
}

..ma funziona solo su firefox.
Come mai?
Ho provato a controllare per filo e per segno sul sito del W3C, ma non riesco a venirne fuori.

Grazie per l'aiuto!

[Mich_]

Stai usando estensioni moderne, non supportate da tutti i browser.

Prova a vedere le tabelle di compatibilita` dei vari attributi CSS
(mi par di ricordare che W3schools.com le aveva - non so se sono aggiornate - altrimenti cerca in rete tali tabelle)

[trez]

Per IE, hai ragione: @keyframe viene supportato solo da IE10 in poi, ma per gli altri dovrebbe funzionare tutto bene, anche perché se controllo alcuni esempi su internet che utilizzino @keyframe e animation, funzionano alla perfezione.

[trez]

Ho risolto.
Mancava un:

@-webkit-keyframes onde-div {
	0% {
    	background-position: 0 0;
	}
	100% {
    	background-position: 100% 0;
	}
}

Grazie comunque al tuo suggerimento ho imparato a controllare sempre la versione supportata su w3cschools!

Spero possa essere utile anche ad altri utenti.

Ciao!