[CSS 3] Animation de transition

Animation de transition

Bonjour,

Pouvez vous m'aider à comprendre le problème de ma page d'accueil.
La transitions sur les images ne marche pas bien et je ne comprend pas pourquoi.

Je place la page d'accueil pour que vous puissiez voir :
residencevacances-istres

Et le code CSS en question :

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
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
.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 18s linear infinite 0s;
    -moz-animation: imageAnimation 18s linear infinite 0s;
    -o-animation: imageAnimation 18s linear infinite 0s;
    -ms-animation: imageAnimation 18s linear infinite 0s;
    animation: imageAnimation 18s linear infinite 0s; 
}
 
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) ;
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 1 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 1 }
    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: 1 }
    100% { opacity: 0}
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 1 }
    100% { opacity: 0 }
}
 
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 1 }
    100% { opacity: 0 }
}
 
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

Je suis parti d'un script existant pour allé plus vite, enfin je pensais.

Merci pour l'aide.
A+

1 pièce(s) jointe(s)

Bonjour,
tu as un problème de séquence. Le mieux dans ce cas est de poser sur un petit graphique l'animation pour en voir les différents phases.

Sans rentrer dans le détail je te met un petit croquis du séquencement.
Pièce jointe 172263
Il en résulte le CSS suivant
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 @keyframes imageAnimation { 0% { opacity:0; animation-timing-function:ease-in; } 11.11% { opacity:1; animation-timing-function:ease-out; } 33.33% { opacity:1 } 44.44% { opacity:0 } 100% { opacity: 0 } }
A toi d'ajuster suivant ton besoin ;)

Merci pour la réponse et surtout pour le petit graphique.

C'est beaucoup plus fluide et propre. :P

A+