Discussion :

[kate59]

Bonjour,

j'ai insérer un diaporama css3 en fond de mon site sur l'exemple il 'avait 6 images j'en mis 3 images mais j'ai un ecran noir entre chaque image qui n'est pas esthetique voila le code:

Code :

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
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 16s linear infinite 0s;
    -moz-animation: imageAnimation 16s linear infinite 0s;
    -o-animation: imageAnimation 16s linear infinite 0s;
    -ms-animation: imageAnimation 16s linear infinite 0s;
    animation: imageAnimation 16s linear infinite 0s;
}
.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 16s linear infinite 0s;
    -moz-animation: titleAnimation 16s linear infinite 0s;
    -o-animation: titleAnimation 16s linear infinite 0s;
    -ms-animation: titleAnimation 16s linear infinite 0s;
    animation: titleAnimation 16s linear infinite 0s;
}
.cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
    background-image: url(images/location-appartement-cerbere-location-gite-cerbere-66-fond1.jpg)
 
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(images/location-appartement-cerbere-location-gite-cerbere-66-fond2.jpg);
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(images/location-appartement-cerbere-location-gite-cerbere-66-fond3.jpg);
    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
    -o-animation-delay: 14s;
    -ms-animation-delay: 14s;
    animation-delay: 14s;
}
 
 
.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
}
.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
    -o-animation-delay: 14s;
    -ms-animation-delay: 14s;
    animation-delay: 14s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
    0% { opacity: 1;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
    0% { opacity: 1;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

voila le site :
http://tympanus.net/codrops/2012/01/...how-with-css3/

merci

[NoSmoking]

Bonjour,
il faudra bien que tu finisses par comprendre que le code de l'exemple qui fonctionne ne nous sert pas à grand chose pour régler un problème sur un code qui ne fonctionne mais que l'on n'a pas.

Je peux néanmoins te dire que tu as visiblement le même problème que fraxinus13, donc il te suffit de regarder cette discussion Animation de transition .

[Invité]

Bonjour,
une solution TRÈS SIMPLE (sans changer de CSS) :
tu mets 6 images, mais 2x les mêmes !

Sinon, il faut modifier le CSS (les transitions).

[NoSmoking]

Salut Jérôme,
même si c'est une solution, il faut quand même préciser qu'il faut mettre image_1.jpg-image_2.jpg-image_3.jpg puis de nouveau image_1.jpg-image_2.jpg-image_3.jpg, néanmoins il est quand même plus important à mon sens de comprendre ce qui se passe et d'en finir avec des copier/coller sans aucune compréhension.

[Invité]

Evidemment,
mais il fait beau dehors !...

Voici une autre méthode CSS/jQuery, où on peut mettre autant d'images qu'on veut : http://codepen.io/jreaux62/pen/aOvemE
(issue de cette discussion)


[EDIT] Je me pose des questions sur le full CSS...
Sur cette page : http://tympanus.net/Tutorials/CSS3Fu...ow/index4.html
Au bout d'un certain temps, l'animation (full CSS) semble saccader de plus en plus...