28172 sujets

CSS et mise en forme, CSS3

Problème keyframes et Firefox

Bonsoir,

voilà j'ai créé cette page HTML et CSS en suivant un cours de Pierre Giraud. Le problème est qu'il fonctionne correctement avec Chrome mais pas avec Firefox 49.0.2(Firefox pour Ubuntu) .

Alors si vous avez une idée ? > Smiley decu

Merci


HTML
<!DOCTYPE html>
<html>  	
	<head>		
		<title>Diaporama</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/diaporame.css">  	

	<body>
		  <h1>Un diaporama en HTML et CSS</h1>
		  <div class="diaporama">
		  </div>
	</body>
</html>


CSS
body{
	margin: 0px;
	padding: 0px;
	width: 100%;
}

.diaporama
{
margin: 0 auto;
width: 960px;
height: 500px;
border: 3px solid #333;
background-image: url("../image/image1.jpg");

-moz-animation-name: diaporama;
-moz-animation-duration: 15s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
    
-webkit-animation-name: diaporama;
-webkit-animation-duration: 15s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
    
animation-name: diaporama;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}


@-moz-keyframes diaporama{
	0%{background-image: url("../image/image1.jpg");}
	33%{background-image: url("../image/image2.jpg");}
	66%{background-image: url("../image/image3.jpg");}
}

@-webkit-keyframes diaporama{
	0%{background-image: url("../image/image1.jpg");}
	33%{background-image: url("../image/image2.jpg");}
	66%{background-image: url("../image/image3.jpg");}
}

@keyframes diaporama{
	0%{background-image: url("../image/image1.jpg");}
	33%{background-image: url("../image/image2.jpg");}
	66%{background-image: url("../image/image3.jpg");}
}
Merci Zelena pour votre réponse mais je vous confirme que ça fonctionne sous Chrome.

Pouvez-vous m'indiquer où je peux trouver un autre modèle?
Sujet clos
Aller à