Problème lié aux keyframes sous firefox

Bonjour,

J"ai un problème lié à l'utilisation des keyframes.

Je suis bien ce qui est décrit dans la première partie de ce tuto:

https://www.youtube.com/watch?v=k54SpuNqkcQ

mais au lieu du fondu attendu j'obtiens la répétition de la première image dans la largeur.

J'ai bien regardé le code et j'ai l'impression d'être 100% identique.

Note: le fondu de l'image marche sous chromium mais l' image est répéteé à l'identique et toujours collée dans la largeur

Voici mon code css:

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

.diaporama1{
margin:0 auto;
width:450 px;
height: 337px;
border: 3px solid #333;
background-image:url("images/1.jpg");

webkit-animation-name: diapo1;
webkit-animation-duration:60s;
webkit-animation-timing-function:linear;
webkit-animation-iteration-count:infinite;
webkit-animation-direction:normal;

moz-animation-name: diapo1;
moz-animation-duration:60s;
moz-animation-timing-function:linear;
moz-animation-iteration-count:infinite;
moz-animation-direction:normal;

animation-name: diapo1;
animation-duration:60s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:normal;

}

@-webkit-keyframes diapo1{
0%{background-image:url("images/1.jpg");}
33%{background-image: url("images/2.jpg");}
66%{background-image: url("images/3.jpg");}
}

@-moz-keyframes diapo1{
0%{background-image: url("images/1.jpg");}
33%{background-image: url("images/2.jpg");}
66%{background-image: url("images/3.jpg");}
}

@-keyframes diapo1{
0%{background-image: url("images/1.jpg");}
33%{background-image: url("images/2.jpg");}
66%{background-image: url("images/3.jpg");}
}

Merci d'avance

Bonjour.

Pour le dernier keyframe, c'est :

@keyframes diapo1...

sans le -

Pour diaporama et body, les valeurs ne sont pas collés aux unités : 0px, 450px, 357px

Bref, vous n'êtes pas 100% identique.

Salut et merci pour votre réponse rapide.
Maintenant cela fonctionne mais uniquement sous chromium (la copie de chrome sous debian) et pas sous firefox.
Merci à vous deux en tout cas.
[oui mes images font toutes la même dimension et j'utilise firefox 45.6.0]
Modifié par tchouang (03 Apr 2017 - 21:10)