Animation d'un background

Version imprimable

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:

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:

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

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

Code:

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:

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

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

24/02/2014, 11h14
Bovino

:recherch:

Toutes les propriétés n'acceptent pas les animations.
24/02/2014, 12h29
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à...
24/02/2014, 14h47
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.
25/02/2014, 08h30
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

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:

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:

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.

Bonjour,
voici un mini-slider 4 images (fade), Full CSS : http://codepen.io/jreaux62/pen/mdBow

Code:

1
2
3
4
5
6
<div id="photoconteneur">
	<div class="photo" id="photo1"></div>
	<div class="photo" id="photo2"></div>
	<div class="photo" id="photo3"></div>
	<div class="photo" id="photo4"></div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#photoconteneur, .photo  { width:800px; height:600px; margin:0 auto; overflow:hidden; }
#photoconteneur  { position:relative; }
.photo  { position:absolute; top:0; left:0; bottom:0; right:0; }
 
#photo1 { background:url(<a href="http://www.wallfizz.com/nature/plage/4283-transat-palmier-WallFizz.jpg" target="_blank">http://www.wallfizz.com/nature/plage...r-WallFizz.jpg</a>) no-repeat; background-size:100% 100%; }
#photo2 { background:url(<a href="http://www.wallfizz.com/nature/plage/4325-vacances-plage-paradisiaque-WallFizz.jpg" target="_blank">http://www.wallfizz.com/nature/plage...e-WallFizz.jpg</a>) no-repeat; background-size:100% 100%; }
#photo3 { background:url(<a href="http://www.wallfizz.com/nature/plage/3440-plage-palmier-WallFizz.jpg" target="_blank">http://www.wallfizz.com/nature/plage...r-WallFizz.jpg</a>) no-repeat; background-size:100% 100%; }
#photo4 { background:url(<a href="http://www.wallfizz.com/nature/plage/4324-rocher-et-plage-WallFizz.jpg" target="_blank">http://www.wallfizz.com/nature/plage...e-WallFizz.jpg</a>) no-repeat; background-size:100% 100%; }
 
/* -webkit- */
@-webkit-keyframes slide1 { 0% { opacity:100; } 25% { opacity:0; } 50% { opacity:0; } 75% { opacity:0; } 100% { opacity:100; } }
@-webkit-keyframes slide2 { 0% { opacity:0; } 25% { opacity:100; } 50% { opacity:0; } 75% { opacity:0; } 100% { opacity:0; } }
@-webkit-keyframes slide3 { 0% { opacity:0; } 25% { opacity:0; } 50% { opacity:100; } 75% { opacity:0; } 100% { opacity:0; } }
@-webkit-keyframes slide4 { 0% { opacity:0; } 25% { opacity:0; } 50% { opacity:0; } 75% { opacity:100; } 100% { opacity:0; } }
#photo1 { -webkit-animation: slide1 16s infinite; }
#photo2 { -webkit-animation: slide2 16s infinite; }
#photo3 { -webkit-animation: slide3 16s infinite; }
#photo4 { -webkit-animation: slide4 16s infinite; }
 
/* -moz- */
@-moz-keyframes slide1 { 0% { opacity:100; } 25% { opacity:0; } 50% { opacity:0; } 75% { opacity:0; } 100% { opacity:100; } }
@-moz-keyframes slide2 { 0% { opacity:0; } 25% { opacity:100; } 50% { opacity:0; } 75% { opacity:0; } 100% { opacity:0; } }
@-moz-keyframes slide3 { 0% { opacity:0; } 25% { opacity:0; } 50% { opacity:100; } 75% { opacity:0; } 100% { opacity:0; } }
@-moz-keyframes slide4 { 0% { opacity:0; } 25% { opacity:0; } 50% { opacity:0; } 75% { opacity:100; } 100% { opacity:0; } }
#photo1 { -moz-animation: slide1 16s infinite; }
#photo2 { -moz-animation: slide2 16s infinite; }
#photo3 { -moz-animation: slide3 16s infinite; }
#photo4 { -moz-animation: slide4 16s infinite; }
 
/* -ms- */
@-ms-keyframes slide1 { 0% { opacity:100; } 25% { opacity:0; } 50% { opacity:0; } 75% { opacity:0; } 100% { opacity:100; } }
@-ms-keyframes slide2 { 0% { opacity:0; } 25% { opacity:100; } 50% { opacity:0; } 75% { opacity:0; } 100% { opacity:0; } }
@-ms-keyframes slide3 { 0% { opacity:0; } 25% { opacity:0; } 50% { opacity:100; } 75% { opacity:0; } 100% { opacity:0; } }
@-ms-keyframes slide4 { 0% { opacity:0; } 25% { opacity:0; } 50% { opacity:0; } 75% { opacity:100; } 100% { opacity:0; } }
#photo1 { -ms-animation: slide1 16s infinite; }
#photo2 { -ms-animation: slide2 16s infinite; }
#photo3 { -ms-animation: slide3 16s infinite; }
#photo4 { -ms-animation: slide4 16s infinite; }
 
/* -o- */
@-o-keyframes slide1 { 0% { opacity:100; } 25% { opacity:0; } 50% { opacity:0; } 75% { opacity:0; } 100% { opacity:100; } }
@-o-keyframes slide2 { 0% { opacity:0; } 25% { opacity:100; } 50% { opacity:0; } 75% { opacity:0; } 100% { opacity:0; } }
@-o-keyframes slide3 { 0% { opacity:0; } 25% { opacity:0; } 50% { opacity:100; } 75% { opacity:0; } 100% { opacity:0; } }
@-o-keyframes slide4 { 0% { opacity:0; } 25% { opacity:0; } 50% { opacity:0; } 75% { opacity:100; } 100% { opacity:0; } }
#photo1 { -o-animation: slide1 16s infinite; }
#photo2 { -o-animation: slide2 16s infinite; }
#photo3 { -o-animation: slide3 16s infinite; }
#photo4 { -o-animation: slide4 16s infinite; }
 
/*  */
@keyframes slide1 { 0% { opacity:100; } 25% { opacity:0; } 50% { opacity:0; } 75% { opacity:0; } 100% { opacity:100; } }
@keyframes slide2 { 0% { opacity:0; } 25% { opacity:100; } 50% { opacity:0; } 75% { opacity:0; } 100% { opacity:0; } }
@keyframes slide3 { 0% { opacity:0; } 25% { opacity:0; } 50% { opacity:100; } 75% { opacity:0; } 100% { opacity:0; } }
@keyframes slide4 { 0% { opacity:0; } 25% { opacity:0; } 50% { opacity:0; } 75% { opacity:100; } 100% { opacity:0; } }
#photo1 { animation: slide1 16s infinite; }
#photo2 { animation: slide2 16s infinite; }
#photo3 { animation: slide3 16s infinite; }
#photo4 { animation: slide4 16s infinite; }

Certains préfixes ne sont plus utiles sur certains navigateurs, au delà de certaines versions (qui supportent sans préfixe).
I.E. aura sans doute besoin, en plus, de filter:alpha :

Code:

1
2
opacity:0;  filter:alpha(opacity=0);
 opacity:100; filter:alpha(opacity=100);

Une variante (slide) : http://codepen.io/jreaux62/pen/FDKEj

26/02/2014, 09h26
JefReb

Excellent, merci jreaux62. Je tournais autour de la solution, mais là c'est nickel ce que je cherchais.
Encore merci