Titre: problème animation css3
Posté par: ali13 le le 10-03-2015 a 19:45:08
Bonjour à tous.
Je suis embêter sur un site.
l'animation se passe bien mais elle bloque au moment de repartir.
http://www.residencevacances-istres.fr/index.php?id=42 (http://www.residencevacances-istres.fr/index.php?id=42)
le morceau de code html:
Code:
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
</li>
<li>
<span>Image 02</span>
</li>
<li>
<span>Image 03</span>
</li>
</ul>
|
|
et le code css en rapport:
Code:
.cb-slideshow, .cb-slideshow:after {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.cb-slideshow:after {
content: "";
}
.cb-slideshow li span {
animation: 18s linear 0s normal none infinite running imageAnimation;
background-position: 50% 50%;
background-size: cover;
color: transparent;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.cb-slideshow li:nth-child(1) span {
background-image: url("../images/1.jpg");
}
.cb-slideshow li:nth-child(2) span {
animation-delay: 6s;
background-image: url("../images/2.jpg");
}
.cb-slideshow li:nth-child(3) span {
animation-delay: 12s;
background-image: url("../images/3.jpg");
}
@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.no-cssanimations .cb-slideshow li span {
opacity: 1;
}
|
|
merci A+ |
Titre: Re:problème animation css3
Posté par: Quentin1306 le le 26-10-2015 a 13:51:10
Bonjour à toi,
De mon coté quand je clique sur ton lien t'es images de fond à droite sont bien il n'y a pas de bug, toutes les images s'enchaîne les une après les autres.
Donc je ne comprend pas ton problème. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|