Discussion :

[JefReb]

Bonjour à tous,
Je n'arrive pas à trouver mon erreur sur l'animation d'un background.
Si je joue sur la couleur du background, cela fonctionne:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div.carre  { width:100px; height:100px;
             background-color:red;
-webkit-animation:couleur 2s infinite alternate; 
	    animation:couleur 2s infinite alternate;
} 
@keyframes couleur
{
0%   {background-color:red; }
25%  {background-color:yellow; }
50%  {background-color:blue; }
100% {background-color:green; }
}
 
@-webkit-keyframes couleur /* Safari and Chrome */
{
0%   {background-color:red; }
25%  {background-color:yellow; }
50%  {background-color:blue; }
100% {background-color:green; }
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="carre"></div>

Mais si je désire utiliser une image en background, la première image s'affiche, mais aucune animation.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
div.photo  { width:200px; height:150px;
             background-image:url(fleur1.jpg); 
 
-webkit-animation:diapo 1s infinite alternate; 
	    animation:diapo 1s infinite alternate;
} 
@keyframes diapo
{
0%   { background-image:url(fleur1.jpg);}
25%  { background-image:url(fleur2.jpg);}
50%  { background-image:url(fleur3.jpg);}
100% { background-image:url(fleur4.jpg);}
}
 
@-webkit-keyframes diapo /* Safari and Chrome */
{
0%   { background-image:url(fleur1.jpg);}
25%  { background-image:url(fleur2.jpg);}
50%  { background-image:url(fleur3.jpg);}
100% { background-image:url(fleur4.jpg);}
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="photo"></div>

Les images sont bien là dans le même répertoire.
Une idée, merci aux passionnés!

[Bovino]

Toutes les propriétés n'acceptent pas les animations.

[Astoumix]

Bonjour,

J'ai testé ton code sur codepen et il fonctionne.

http://codepen.io/anon/pen/KaCko

Donc le problème ne viens peut-être pas de là...

[Invité]

Bonjour,

@Astoumix
Certes, ça fonctionne ici sur Opera, mais pas sur firefox, ni I.E. (entre autres).

Une alternative pourrait être d'avoir plusieurs <div>, et de jouer sur l'opacité (en alternance).
L'animation de l'opacité est, je crois, plus largement supportée.

[JefReb]

Merci, effectivement, je fais tellement confiance à Firefox pour tester que je n'avais pas songé à cela.
Cela fonctionne sous Chrome et opera, mais pas sous Firefox et IE.
J'attends un peu avant de clore ce topic
Encore merci

[JefReb]

J'ai essayé de jouer sur l'opacité ainsi que z-index, mais dans ce cas, je n'arrive qu'à une transition sur 2 photos. Mais je n'arrive pas à trouver le code pour plusieurs photos. Que cela ne marche pas sous IE, on y est habitué, mais pas sous Firefox alors que cela fonctionne sous Opera, Chrome et safari, c'est rageant.

Pour 2 photos, voici ce que j'ai:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
div.photo     {  position:relative; width:200px; height:150px; }
div.photo img 
{ 
                -webkit-transition: all 2s ease-in-out; 
                   -moz-transition: all 2s ease-in-out;
	             -ms-transition: all 2s ease-in-out;
		       -o-transition: all 2s ease-in-out;
                            transition: all 2s ease-in-out; 
}
img.swap1, img.swap2     { position:absolute; }
img.swap1, div.photo:hover img.swap2 { opacity: 1; }
div.photo:hover img.swap1, img.swap2 { opacity: 0; }

Code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="photo">
<img class="swap1" src="fleur1.jpg" alt="">
<img class="swap2" src="fleur2.jpg" alt="">
</div>

Si quelqu'un a un code pour plus de 2 photos ce serait super.