Probléme d'animation sur firefox

Question

Bonjour, j'ai un problème d'animation qui ne s'affiche pas sur firefox :

.hexadecimal{
	width: 150px;
	height: 220px;
	animation: hexad 10s linear 0s infinite;
	-moz-animation: hexad 10s linear 0s infinite;
	-webkit-animation: hexad 10s linear 0s infinite;
	background-size: 100% 100%;
	border-radius: 10%;
	display: inline-block;
}

@keyframes hexad{
	from { background: url("0.jpg"); background-size: 100% 100%;}
	6.25% { background: url("0.jpg"); background-size: 100% 100%;}
	6.26% {background: url("1.jpg"); background-size: 100% 100%;}
	12.5% {background: url("1.jpg"); background-size: 100% 100%;}
	12.6% {background: url("2.jpg"); background-size: 100% 100%;}
	18.75% {background: url("2.jpg"); background-size: 100% 100%;}
	18.76% {background: url("3.jpg"); background-size: 100% 100%;}
	25% {background: url("3.jpg"); background-size: 100% 100%;}
	25.1% {background: url("4.jpg"); background-size: 100% 100%;}
	31.25% {background: url("4.jpg"); background-size: 100% 100%;}
	31.26% {background: url("5.jpg"); background-size: 100% 100%;}
	37.5% {background: url("5.jpg"); background-size: 100% 100%;}
	37.51% {background: url("6.jpg"); background-size: 100% 100%;}
	43.75% {background: url("6.jpg"); background-size: 100% 100%;}
	43.76% {background: url("7.jpg"); background-size: 100% 100%;}
	50% {background: url("7.jpg"); background-size: 100% 100%;}
	50.1% {background: url("8.jpg"); background-size: 100% 100%;}
	56.25% {background: url("8.jpg"); background-size: 100% 100%;}
	56.26% {background: url("9.jpg"); background-size: 100% 100%;}
	62.5% {background: url("9.jpg"); background-size: 100% 100%;}
	62.51% {background: url("a.jpg"); background-size: 100% 100%;}
	68.75% {background: url("a.jpg"); background-size: 100% 100%;}
	68.76% {background: url("b.jpg"); background-size: 100% 100%;}
	75% {background: url("b.jpg"); background-size: 100% 100%;}
	75.1% {background: url("c.jpg"); background-size: 100% 100%;}
	81.25% {background: url("c.jpg"); background-size: 100% 100%;}
	81.26% {background: url("d.jpg"); background-size: 100% 100%;}
	87.5% {background: url("d.jpg"); background-size: 100% 100%;}
	87.6% {background: url("e.jpg"); background-size: 100% 100%;}
	93.75% {background: url("e.jpg"); background-size: 100% 100%;}
	93.76% {background: url("f.jpg"); background-size: 100% 100%;}
	to { background: url("f.jpg"); background-size: 100% 100%;}
}

@-moz-keyframes hexad{
	from { background: url("0.jpg"); background-size: 100% 100%;}
	6.25% { background: url("0.jpg"); background-size: 100% 100%;}
	6.26% {background: url("1.jpg"); background-size: 100% 100%;}
	12.5% {background: url("1.jpg"); background-size: 100% 100%;}
	12.6% {background: url("2.jpg"); background-size: 100% 100%;}
	18.75% {background: url("2.jpg"); background-size: 100% 100%;}
	18.76% {background: url("3.jpg"); background-size: 100% 100%;}
	25% {background: url("3.jpg"); background-size: 100% 100%;}
	25.1% {background: url("4.jpg"); background-size: 100% 100%;}
	31.25% {background: url("4.jpg"); background-size: 100% 100%;}
	31.26% {background: url("5.jpg"); background-size: 100% 100%;}
	37.5% {background: url("5.jpg"); background-size: 100% 100%;}
	37.51% {background: url("6.jpg"); background-size: 100% 100%;}
	43.75% {background: url("6.jpg"); background-size: 100% 100%;}
	43.76% {background: url("7.jpg"); background-size: 100% 100%;}
	50% {background: url("7.jpg"); background-size: 100% 100%;}
	50.1% {background: url("8.jpg"); background-size: 100% 100%;}
	56.25% {background: url("8.jpg"); background-size: 100% 100%;}
	56.26% {background: url("9.jpg"); background-size: 100% 100%;}
	62.5% {background: url("9.jpg"); background-size: 100% 100%;}
	62.51% {background: url("a.jpg"); background-size: 100% 100%;}
	68.75% {background: url("a.jpg"); background-size: 100% 100%;}
	68.76% {background: url("b.jpg"); background-size: 100% 100%;}
	75% {background: url("b.jpg"); background-size: 100% 100%;}
	75.1% {background: url("c.jpg"); background-size: 100% 100%;}
	81.25% {background: url("c.jpg"); background-size: 100% 100%;}
	81.26% {background: url("d.jpg"); background-size: 100% 100%;}
	87.5% {background: url("d.jpg"); background-size: 100% 100%;}
	87.6% {background: url("e.jpg"); background-size: 100% 100%;}
	93.75% {background: url("e.jpg"); background-size: 100% 100%;}
	93.76% {background: url("f.jpg"); background-size: 100% 100%;}
	to { background: url("f.jpg"); background-size: 100% 100%;}
}

Si vous savez quel est mon erreur merci de me répondre ^^.

monday1999 · Answer

Bonjour, réinstallez Firefox et verifiez vos Plugin

stev · Answer

La réinstallation de firefox ne change rien, j'ai plusieurs animations sur mon site et seuls les animations qui modifie le background ne marche pas sur firefox... C'est vraiment bizarre ..

Utilisateur anonyme · Answer

Salut, essaye de changer tes background par background-image

bonne soirée

animostab · Answer

Salut
@keyframes ne peux pas switcher des images de background, donc la ton code est "futuriste" (peux être un jour ce sera possible mais pour l'heure: non.)

ce que tu peux faire c'est mettre toutes les images en une seule (les unes à la suite des autres) et animer comme un sprite.

sinon tu devras faire un diaporama genre jquery

autre chose ne mets pas de double quotes dans le parenthèse url
ex url(image1.jpg);
 
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

Probléme d'animation sur firefox

4 réponses

Votre réponse

Discussions similaires