Effet CSS 3 uniquement visible sur Firefox

Bonjour,

Voici çi-dessous, mon code css permettant de faire un effet de chevauchement de 3 photos.

Mon problème est le suivant :

Cet effet ne fonctionne que sur firefox !

http://www.lucpetitcreation.biz/2012/cat_ceremonies.php

Merci d'avance à quiconque pourra me fournir un élément de réponse

@font-face {

	@-webkit-keyframes cf4FadeInOut {
	0% {
	    opacity: 0;
	    -webkit-animation-timing-function: ease-in;
	}
	7% {
	    opacity: 1;
	    -webkit-transform: translateX(0px);
	    -webkit-animation-timing-function: ease-out;
	}
	38% {
	    opacity: 1;
	    -webkit-transform: translateX(-120px);
	}
	60% {
	    opacity: 0;
	    -webkit-transform: translateX(-220px);
	}
	100% { opacity: 0 }

	}

	@-moz-keyframes cf4FadeInOut {
	0% {
	    opacity: 0;
	    -moz-animation-timing-function: ease-in;
	}
	7% {
	    opacity: 1;
	    -moz-transform: translateX(0px);
	    -moz-animation-timing-function: ease-out;
	}
	38% {
	    opacity: 1;
	    -moz-transform: translateX(-120px);
	}
	60% {
	    opacity: 0;
	    -moz-transform: translateX(-220px);
	}
	100% { opacity: 0 }
   }
	
	

	@-ms-keyframes cf4FadeInOut {
	0% {
	    opacity: 0;
	    -ms-animation-timing-function: ease-in;
	}
	7% {
	    opacity: 1;
	    -ms-transform: translateX(0px);
	    -ms-animation-timing-function: ease-out;
	}
	38% {
	    opacity: 1;
	    -ms-transform: translateX(-120px);
	}
	60% {
	    opacity: 0;
	    -ms-transform: translateX(-220px);
	}
	100% { opacity: 0 }

	
	}

	@-o-keyframes cf4FadeInOut {
	0% {
	    opacity: 0;
	    -o-animation-timing-function: ease-in;
	}
	7% {
	    opacity: 1;
	    -o-transform: translateX(0px);
	    -o-animation-timing-function: ease-out;
	}
	38% {
	    opacity: 1;
	    -o-transform: translateX(-120px);
	}
	60% {
	    opacity: 0;
	    -o-transform: translateX(-220px);
	}
	100% { opacity: 0 }
	}

	@keyframes cf4FadeInOut {
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	7% {
	    opacity: 1;
	    transform: translateX(0px);
	    animation-timing-function: ease-out;
	}
	38% {
	    opacity: 1;
	    transform: translateX(-120px);
	}
	60% {
	    opacity: 0;
	    transform: translateX(-220px);
	}
	100% { opacity: 0 }
	}

	#vign {
	/*position:relative;*/

		height:125px;
		width:183px;
		float:left;
		margin-right:20px;
		margin-top:15px;
	}
		#cf4a {
		position:relative;
		overflow:hidden;
		height:100px;
		width:183px;


	}
		.cf4_title {

		margin-top:3px;
		font-size:14px;
	
	font-weight:600;
	font-family: 'HelveticaNeueLightCondRegular';
	color:#FFF;
	text-transform: uppercase;
	float:right;
	text-align:right;
	}
	
	
	#cf4a img {
		position:absolute;
		left:0;
	}

	#cf4a img {
		-webkit-animation-name: cf4FadeInOut;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-duration: 15s;

		-moz-animation-name: cf4FadeInOut;
		-moz-animation-timing-function: linear;
		-moz-animation-iteration-count: infinite;
		-moz-animation-duration: 15s;

		-ms-animation-name: cf4FadeInOut;
		-ms-animation-timing-function: linear;
		-ms-animation-iteration-count: infinite;
		-ms-animation-duration: 15s;

		-o-animation-name: cf4FadeInOut;
		-o-animation-timing-function: linear;
		-o-animation-iteration-count: infinite;
		-o-animation-duration: 15s;

		animation-name: cf4FadeInOut;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-duration: 15s;
		
	}
    #cf4a img:nth-of-type(1) {
		-webkit-animation-delay: 10s;
		-moz-animation-delay: 10s;
		-ms-animation-delay: 10s;
		-o-animation-delay: 10s;
		animation-delay: 10s;
		
    }
    #cf4a img:nth-of-type(2) {
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
		-ms-animation-delay: 5s;
		-o-animation-delay: 5s;
		animation-delay: 5s;
    }
    #cf4a img:nth-of-type(3) {
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
		-ms-animation-delay: 0s;
		-o-animation-delay: 0s;
		animation-delay: 0s;
    }
</style>

Bonjour,
Est-ce normal le @font-face ouvert au début ?

Perso j'ai pas compris la demande... t'as essayé de charger prefixfree ? peut être il va te trouver des correspondances et ajouter des prefix pour les autres navigateurs...

Les animations semblent être prises en compte sur Chrome quand je mets ton code sous JS Bin, c'est curieux que cela fonctionne pas sur ton site.

Gothor a écrit :
Bonjour,
Est-ce normal le @font-face ouvert au début ?

oui et non, j'ai voulu élaguer pour ne mettre que le code nécesaire, mais j'ai oublié cette ligne !

Je vais essayer avec prefixfree, voir ce que çà donne.

Merci de vous intéresser à mon problème.

Malheureusement, l'utilisation de Prefixfree n'a rien changé.
Et mes autre tentatives se sont relevées infructueuses.

Pour info, le lien a changé :
http://www.lucpetitcreation.biz/fr/cat_ceremonies.php