Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

bruno2galdino

Slide Show

Por , em Desenvolvimento frontend

Recommended Posts

bruno2galdino    0

bruno2galdino
Postado

Ola galera boa tarde!

Estou tendo problema com um slide show no mozila ele funciona perfeitamente mas no chrome e mobile passa uns 5 slides o restante nao :( alguem puder ajudar www.grupoasuplementos.com

/*-- Slide Produtos--*/
#slider_protein{
	background: #FFF;
	border: 5px solid #eaeaea;
	border-radius: 7px 7px 7px 7px;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
	height: 340px;
	width: 320px;
	margin: 40px auto 0;
	overflow: visible;
	position: relative;
}

#mascara_protein {
	overflow: hidden;
	height: 320px;
}

#slider_protein ul {
	margin: 0;
	padding: 0;
	position: relative;
}

#slider_protein li {
	width: 319px;
	height: 319px;
	position: absolute;
	list-style: none;
}

#slider_protein li.primeira-anima {
	animation: cycle 75s linear infinite;
	-moz-animation: cycle 75s linear infinite;
	-webkit-animation: cycle 75s linear infinite;
	-ms-animation: cycle 75s linear infinite;
	-o-animation: cycle 75s linear infinite;
}
 
#slider_protein li.segunda-anima {
	animation: cycletwo 75s linear infinite;
	-moz-animation: cycletwo 75s linear infinite;
	-webkit-animation: cycletwo 75s linear infinite;
	-ms-animation: cycletwo 75s linear infinite;
	-o-animation: cycletwo 75s linear infinite;
}
 
#slider_protein li.terceiro-anima {
	animation: cyclethree 75s linear infinite;
	-moz-animation: cyclethree 75s linear infinite;
	-webkit-animation: cyclethree 75s linear infinite;
	-ms-animation: cyclethree 75s linear infinite;
	-o-animation: cyclethree 75s linear infinite;
}
 
#slider_protein li.quarto-anima {
	animation: cyclefour 75s linear infinite;
	-moz-animation: cyclefour 75s linear infinite;
	-webkit-animation: cyclefour 75s linear infinite;
	-ms-animation: cyclefour 75s linear infinite;
	-o-animation: cyclefour 75s linear infinite;}
 
#slider_protein li.quinto-anima {
	animation: cyclefive 75s linear infinite;
	-moz-animation: cyclefive 75s linear infinite;
	-webkit-animation: cyclefive 75s linear infinite;
	-ms-animation: cyclefive 75s linear infinite;
	-o-animation: cyclefive 75s linear infinite;
}

#slider_protein li.sexto-anima {
	animation: cyclesix 75s linear infinite;
	-moz-animation: cyclesix 75s linear infinite;
	-webkit-animation: cyclesix 75s linear infinite;
	-ms-animation: cyclesix 75s linear infinite;
	-o-animation: cyclesix 75s linear infinite;
}

#slider_protein li.setimo-anima {
	animation: cycleseven 75s linear infinite;
	-moz-animation: cycleseven 75s linear infinite;
	-webkit-animation: cycleseven 75s linear infinite;
	-ms-animation: cycleseven 75s linear infinite;
	-o-animation: cycleseven 75s linear infinite;
}

#slider_protein li.oitavo-anima {
	animation: cycleeigth 75s linear infinite;
	-moz-animation: cycleeigth 75s linear infinite;
	-webkit-animation: cycleeigth 75s linear infinite;
	-ms-animation: cycleeigth 75s linear infinite;
	-o-animation: cycleeigth 75s linear infinite;
}

#slider_protein li.nono-anima {
	animation: cyclenine 75s linear infinite;
	-moz-animation: cyclenine 75s linear infinite;
	-webkit-animation: cyclenine 75s linear infinite;
	-ms-animation: cyclenine 75s linear infinite;
	-o-animation: cyclenine 75s linear infinite;
}

#slider_protein li.decimo-anima {
	animation: cycleten 75s linear infinite;
	-moz-animation: cycleten 75s linear infinite;
	-webkit-animation: cycleten 75s linear infinite;
	-ms-animation: cycleten 75s linear infinite;
	-o-animation: cycleten 75s linear infinite;
}

#slider_protein li.deci-primeiro-anima {
	animation: cycletenone 75s linear infinite;
	-moz-animation: cycletenone 75s linear infinite;
	-webkit-animation: cycletenone 75s linear infinite;
	-ms-animation: cycletenone 75s linear infinite;
	-o-animation: cycletenone 75s linear infinite;
}

#slider_protein li.deci-segundo-anima {
	animation: cycletentwo 75s linear infinite;
	-moz-animation: cycletentwo 75s linear infinite;
	-webkit-animation: cycletentwo 75s linear infinite;
	-ms-animation: cycletentwo 75s linear infinite;
	-o-animation: cycletentwo 75s linear infinite;
}

#slider_protein li.deci-terceiro-anima {
	animation: cycletenthree 75s linear infinite;
	-moz-animation: cycletenthree 75s linear infinite;
	-webkit-animation: cycletenthree 75s linear infinite;
	-ms-animation: cycletenthree 75s linear infinite;
	-o-animation: cycletenthree 75s linear infinite;
}

#slider_protein li.deci-quarto-anima {
	animation: cycletenfour 75s linear infinite;
	-moz-animation: cycletenfour 75s linear infinite;
	-webkit-animation: cycletenfour 75s linear infinite;
	-ms-animation: cycletenfour 75s linear infinite;
	-o-animation: cycletenfour 75s linear infinite;
}

#slider_protein li.deci-quinto-anima {
	animation: cycletenfive 75s linear infinite;
	-moz-animation: cycletenfive 75s linear infinite;
	-webkit-animation: cycletenfive 75s linear infinite;
	-ms-animation: cycletenfive 75s linear infinite;
	-o-animation: cycletenfive 75s linear infinite;
}


@keyframes cycle {
0% { right: 0px; opacity:1; z-index:0; }
1.333333333% { right: 0px; opacity:1; z-index:1; }
4% { right: 0px; opacity: 1; z-index:1;}
5.333333333% { right: 325px; opacity: 0;}
6.666666667% { right: 325px; opacity: 0;}
10% {right: -325px; opacity: 0; z-index:-1;}
98.66666667% { right: -325px; opacity: 0; z-index: -1; }
100%{ right: 0px; opacity: 1; z-index: 1; }

}
 
@keyframes cycletwo {
0%  { right: -325px; opacity: 0; }
5.333333333% { right: -325px; opacity: 0; z-index: -1; }
6.666666667% { right: 0px; opacity: 1; }
10.66666667% {right: 0px; opacity: 1; }
12% { right: 325px; opacity: 0; }
13.33333333% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}
 
@keyframes cyclethree {
0%  { right: -325px; opacity: 0; }
12% { right: -325px; opacity: 0; }
13.33333333% { right: 0px; opacity: 1; }
17.33333333% { right: 0px; opacity: 1; }
18.66666667% { right: 325px; opacity: 0; }
20% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}
 
@keyframes cyclefour {
0%  { right: -325px; opacity: 0; }
18.66666667% { right: -325px; opacity: 0; }
20% { right: 0px; opacity: 1; }
24% { right: 0px; opacity: 1; }
25.33333333% { right: 325px; opacity: 0; }
26.66666667% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefive {
0%  { right: -325px; opacity: 0; }
25.33333333% { right: -325px; opacity: 0; }
26.66666667% { right: 0px; opacity: 1; }
30.66666667% { right: 0px; opacity: 1; }
32% { right: 325px; opacity: 0; z-index: -1; }
33.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}
 
@keyframes cyclesix {
0%  { right: -325px; opacity: 0; }
32% { right: -325px; opacity: 0; }
33.33333333% { right: 0px; opacity: 1; }
37.33333333% { right: 0px; opacity: 1; }
38.66666667% { right: 325px; opacity: 0; z-index: -1; }
40% { right: 325px; opacity: 0; z-index: -1; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cycleseven {
0%  { right: -325px; opacity: 0; }
38.66666667% { right: -325px; opacity: 0; }
40% { right: 0px; opacity: 1; }
44% { right: 0px; opacity: 1; }
45.33333333% { right: 325px; opacity: 0; z-index: -1; }
46.66666667% { right: 325px; opacity: 0; z-index: -1; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cycleeigth {
0%  { right: -325px; opacity: 0; }
45.33333333% { right: -325px; opacity: 0; }
46.66666667% { right: 0px; opacity: 1; }
50.66666667% { right: 0px; opacity: 1; }
52% { right: 325px; opacity: 0; z-index: -1; }
53.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclenine {
0%  { right: -325px; opacity: 0; }
52% { right: -325px; opacity: 0; }
53.33333333% { right: 0px; opacity: 1; }
57.33333333% { right: 0px; opacity: 1; }
58.66666667% { right: 325px; opacity: 0; z-index: -1; }
60% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cycleten {
0%  { right: -325px; opacity: 0; }
58.66666667% { right: -325px; opacity: 0; }
60% { right: 0px; opacity: 1; }
64% { right: 0px; opacity: 1; }
65.33333333% { right: 325px; opacity: 0; z-index: -1; }
66.66666667% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cycletenone {
0%  { right: -325px; opacity: 0; }
65.33333333% { right: -325px; opacity: 0; }
66.66666667% { right: 0px; opacity: 1; }
70.66666667% { right: 0px; opacity: 1; }
72% { right: 325px; opacity: 0; z-index: -1; }
73.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cycletentwo {
0%  { right: -325px; opacity: 0; }
72% { right: -325px; opacity: 0; }
73.33333333% { right: 0px; opacity: 1; }
77.33333333% { right: 0px; opacity: 1; }
78.66666667% { right: 325px; opacity: 0; z-index: -1; }
80% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cycletenthree {
0%  { right: -325px; opacity: 0; }
78.66666667% { right: -325px; opacity: 0; }
80% { right: 0px; opacity: 1; }
84% { right: 0px; opacity: 1; }
85.33333333% { right: 325px; opacity: 0; z-index: -1; }
86.66666667% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cycletenfour {
0%  { right: -325px; opacity: 0; }
85.33333333% { right: -325px; opacity: 0; }
86.66666667% { right: 0px; opacity: 1; }
90.66666667% { right: 0px; opacity: 1; }
92% { right: 325px; opacity: 0; z-index: -1; }
93.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cycletenfive {
0%  { right: -325px; opacity: 0; }
92% { right: -325px; opacity: 0; }
93.33333333% { right: 0px; opacity: 1; }
97.33333333% { right: 0px; opacity: 1; }
98.66666667% { right: 325px; opacity: 0; z-index: -1; }
100%{ right: 325px; opacity: 0; z-index: 0; }

}

/*-- Mozila --*/

@-moz-keyframes cycle {
0% { right: 0px; opacity:1; z-index:0; }
1.333333333% { right: 0px; opacity:1; z-index:1; }
4% { right: 0px; opacity: 1; z-index:1;}
5.333333333% { right: 325px; opacity: 0;}
6.666666667% { right: 325px; opacity: 0;}
10% {right: -325px; opacity: 0; z-index:-1;}
98.66666667% { right: -325px; opacity: 0; z-index: -1; }
100%{ right: 0px; opacity: 1; z-index: 1; }

}
 
@-moz-keyframes cycletwo {
0%  { right: -325px; opacity: 0; }
5.333333333% { right: -325px; opacity: 0; z-index: -1; }
6.666666667% { right: 0px; opacity: 1; }
10.66666667% {right: 0px; opacity: 1; }
12% { right: 325px; opacity: 0; }
13.33333333% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}
 
@-moz-keyframes cyclethree {
0%  { right: -325px; opacity: 0; }
12% { right: -325px; opacity: 0; }
13.33333333% { right: 0px; opacity: 1; }
17.33333333% { right: 0px; opacity: 1; }
18.66666667% { right: 325px; opacity: 0; }
20% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cyclefour {
0%  { right: -325px; opacity: 0; }
18.66666667% { right: -325px; opacity: 0; }
20% { right: 0px; opacity: 1; }
24% { right: 0px; opacity: 1; }
25.33333333% { right: 325px; opacity: 0; }
26.66666667% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cyclefive {
0%  { right: -325px; opacity: 0; }
25.33333333% { right: -325px; opacity: 0; }
26.66666667% { right: 0px; opacity: 1; }
30.66666667% { right: 0px; opacity: 1; }
32% { right: 325px; opacity: 0; z-index: -1; }
33.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}
 
@-moz-keyframes cyclesix {
0%  { right: -325px; opacity: 0; }
32% { right: -325px; opacity: 0; }
33.33333333% { right: 0px; opacity: 1; }
37.33333333% { right: 0px; opacity: 1; }
38.66666667% { right: 325px; opacity: 0; z-index: -1; }
40% { right: 325px; opacity: 0; z-index: -1; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cycleseven {
0%  { right: -325px; opacity: 0; }
38.66666667% { right: -325px; opacity: 0; }
40% { right: 0px; opacity: 1; }
44% { right: 0px; opacity: 1; }
45.33333333% { right: 325px; opacity: 0; z-index: -1; }
46.66666667% { right: 325px; opacity: 0; z-index: -1; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cycleeigth {
0%  { right: -325px; opacity: 0; }
45.33333333% { right: -325px; opacity: 0; }
46.66666667% { right: 0px; opacity: 1; }
50.66666667% { right: 0px; opacity: 1; }
52% { right: 325px; opacity: 0; z-index: -1; }
53.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cyclenine {
0%  { right: -325px; opacity: 0; }
52% { right: -325px; opacity: 0; }
53.33333333% { right: 0px; opacity: 1; }
57.33333333% { right: 0px; opacity: 1; }
58.66666667% { right: 325px; opacity: 0; z-index: -1; }
60% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cycleten {
0%  { right: -325px; opacity: 0; }
58.66666667% { right: -325px; opacity: 0; }
60% { right: 0px; opacity: 1; }
64% { right: 0px; opacity: 1; }
65.33333333% { right: 325px; opacity: 0; z-index: -1; }
66.66666667% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cycletenone {
0%  { right: -325px; opacity: 0; }
65.33333333% { right: -325px; opacity: 0; }
66.66666667% { right: 0px; opacity: 1; }
70.66666667% { right: 0px; opacity: 1; }
72% { right: 325px; opacity: 0; z-index: -1; }
73.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cycletentwo {
0%  { right: -325px; opacity: 0; }
72% { right: -325px; opacity: 0; }
73.33333333% { right: 0px; opacity: 1; }
77.33333333% { right: 0px; opacity: 1; }
78.66666667% { right: 325px; opacity: 0; z-index: -1; }
80% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cycletenthree {
0%  { right: -325px; opacity: 0; }
78.66666667% { right: -325px; opacity: 0; }
80% { right: 0px; opacity: 1; }
84% { right: 0px; opacity: 1; }
85.33333333% { right: 325px; opacity: 0; z-index: -1; }
86.66666667% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cycletenfour {
0%  { right: -325px; opacity: 0; }
85.33333333% { right: -325px; opacity: 0; }
86.66666667% { right: 0px; opacity: 1; }
90.66666667% { right: 0px; opacity: 1; }
92% { right: 325px; opacity: 0; z-index: -1; }
93.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cycletenfive {
0%  { right: -325px; opacity: 0; }
92% { right: -325px; opacity: 0; }
93.33333333% { right: 0px; opacity: 1; }
97.33333333% { right: 0px; opacity: 1; }
98.66666667% { right: 325px; opacity: 0; z-index: -1; }
100%{ right: 325px; opacity: 0; z-index: 0; }

}

/*-- Google --*/

@-webkit-keyframes cycle {
0% { right: 0px; opacity:1; z-index:0; }
1.333333333% { right: 0px; opacity:1; z-index:1; }
4% { right: 0px; opacity: 1; z-index:1;}
5.333333333% { right: 325px; opacity: 0;}
6.666666667% { right: 325px; opacity: 0;}
10% {right: -325px; opacity: 0; }
98.66666667% { right: -325px; opacity: 0;  }
100%{ right: 0px; opacity: 1;  }

}
 
@-webkit-keyframes cycletwo {
0%  { right: -325px; opacity: 0; }
5.333333333% { right: -325px; opacity: 0;  }
6.666666667% { right: 0px; opacity: 1; }
10.66666667% {right: 0px; opacity: 1; }
12% { right: 325px; opacity: 0; }
13.33333333% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0;  }
}
 
@-webkit-keyframes cyclethree {
0%  { right: -325px; opacity: 0; }
12% { right: -325px; opacity: 0; }
13.33333333% { right: 0px; opacity: 1; }
17.33333333% { right: 0px; opacity: 1; }
18.66666667% { right: 325px; opacity: 0; }
20% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0; }
}
 
@-webkit-keyframes cyclefour {
0%  { right: -325px; opacity: 0; }
18.66666667% { right: -325px; opacity: 0; }
20% { right: 0px; opacity: 1; }
24% { right: 0px; opacity: 1; }
25.33333333% { right: 325px; opacity: 0; }
26.66666667% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0;  }
}

@-webkit-keyframes cyclefive {
0%  { right: -325px; opacity: 0; }
25.33333333% { right: -325px; opacity: 0; }
26.66666667% { right: 0px; opacity: 1; }
30.66666667% { right: 0px; opacity: 1; }
32% { right: 325px; opacity: 0;  }
33.33333333% { right: 325px; opacity: 0;  }
100% { right: -325px; opacity: 0;  }
}
 
@-webkit-keyframes cyclesix {
0%  { right: -325px; opacity: 0; }
32% { right: -325px; opacity: 0; }
33.33333333% { right: 0px; opacity: 1; }
37.33333333% { right: 0px; opacity: 1; }
38.66666667% { right: 325px; opacity: 0; }
40% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0; }
}

@-webkit-keyframes cycleseven {
0%  { right: -325px; opacity: 0; }
38.66666667% { right: -325px; opacity: 0; }
40% { right: 0px; opacity: 1; }
44% { right: 0px; opacity: 1; }
45.33333333% { right: 325px; opacity: 0;  }
46.66666667% { right: 325px; opacity: 0;  }
100%{ right: -325px; opacity: 0;  }
}

@-webkit-keyframes cycleeigth {
0%  { right: -325px; opacity: 0; }
45.33333333% { right: -325px; opacity: 0; }
46.66666667% { right: 0px; opacity: 1; }
50.66666667% { right: 0px; opacity: 1; }
52% { right: 325px; opacity: 0;  }
53.33333333% { right: 325px; opacity: 0;  }
100% { right: -325px; opacity: 0;  }
}

@-webkit-keyframes cyclenine {
0%  { right: -325px; opacity: 0; }
52% { right: -325px; opacity: 0; }
53.33333333% { right: 0px; opacity: 1; }
57.33333333% { right: 0px; opacity: 1; }
58.66666667% { right: 325px; opacity: 0;  }
60% { right: 325px; opacity: 0;  }
100% { right: -325px; opacity: 0;  }
}

@-webkit-keyframes cycleten {
0%  { right: -325px; opacity: 0; }
58.66666667% { right: -325px; opacity: 0; }
60% { right: 0px; opacity: 1; }
64% { right: 0px; opacity: 1; }
65.33333333% { right: 325px; opacity: 0;  }
66.66666667% { right: 325px; opacity: 0;  }
100% { right: -325px; opacity: 0;  }
}

@-webkit-keyframes cycletenone {
0%  { right: -325px; opacity: 0; }
65.33333333% { right: -325px; opacity: 0; }
66.66666667% { right: 0px; opacity: 1; }
70.66666667% { right: 0px; opacity: 1; }
72% { right: 325px; opacity: 0;  }
73.33333333% { right: 325px; opacity: 0;  }
100% { right: -325px; opacity: 0;  }
}

@-webkit-keyframes cycletentwo {
0%  { right: -325px; opacity: 0; }
72% { right: -325px; opacity: 0; }
73.33333333% { right: 0px; opacity: 1; }
77.33333333% { right: 0px; opacity: 1; }
78.66666667% { right: 325px; opacity: 0;  }
80% { right: 325px; opacity: 0;  }
100% { right: -325px; opacity: 0;  }
}

@-webkit-keyframes cycletenthree {
0%  { right: -325px; opacity: 0; }
78.66666667% { right: -325px; opacity: 0; }
80% { right: 0px; opacity: 1; }
84% { right: 0px; opacity: 1; }
85.33333333% { right: 325px; opacity: 0;  }
86.66666667% { right: 325px; opacity: 0;  }
100% { right: -325px; opacity: 0;  }
}

@-webkit-keyframes cycletenfour {
0%  { right: -325px; opacity: 0; }
85.33333333% { right: -325px; opacity: 0; }
86.66666667% { right: 0px; opacity: 1; }
90.66666667% { right: 0px; opacity: 1; }
92% { right: 325px; opacity: 0;  }
93.33333333% { right: 325px; opacity: 0;  }
100% { right: -325px; opacity: 0;  }
}

@-webkit-keyframes cycletenfive {
0%  { right: -325px; opacity: 0; }
92% { right: -325px; opacity: 0; }
93.33333333% { right: 0px; opacity: 1; }
97.33333333% { right: 0px; opacity: 1; }
98.66666667% { right: 325px; opacity: 0;  }
100%{ right: 325px; opacity: 0;  }

}

/*-- Opera --*/

@-o-keyframes cycle {
0% { right: 0px; opacity:1; z-index:0; }
1.333333333% { right: 0px; opacity:1; z-index:1; }
4% { right: 0px; opacity: 1; z-index:1;}
5.333333333% { right: 325px; opacity: 0;}
6.666666667% { right: 325px; opacity: 0;}
10% {right: -325px; opacity: 0; z-index:-1;}
98.66666667% { right: -325px; opacity: 0; z-index: -1; }
100%{ right: 0px; opacity: 1; z-index: 1; }

}
 
@-o-keyframes cycletwo {
0%  { right: -325px; opacity: 0; }
5.333333333% { right: -325px; opacity: 0; z-index: -1; }
6.666666667% { right: 0px; opacity: 1; }
10.66666667% {right: 0px; opacity: 1; }
12% { right: 325px; opacity: 0; }
13.33333333% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}
 
@-o-keyframes cyclethree {
0%  { right: -325px; opacity: 0; }
12% { right: -325px; opacity: 0; }
13.33333333% { right: 0px; opacity: 1; }
17.33333333% { right: 0px; opacity: 1; }
18.66666667% { right: 325px; opacity: 0; }
20% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cyclefour {
0%  { right: -325px; opacity: 0; }
18.66666667% { right: -325px; opacity: 0; }
20% { right: 0px; opacity: 1; }
24% { right: 0px; opacity: 1; }
25.33333333% { right: 325px; opacity: 0; }
26.66666667% { right: 325px; opacity: 0; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cyclefive {
0%  { right: -325px; opacity: 0; }
25.33333333% { right: -325px; opacity: 0; }
26.66666667% { right: 0px; opacity: 1; }
30.66666667% { right: 0px; opacity: 1; }
32% { right: 325px; opacity: 0; z-index: -1; }
33.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}
 
@-o-keyframes cyclesix {
0%  { right: -325px; opacity: 0; }
32% { right: -325px; opacity: 0; }
33.33333333% { right: 0px; opacity: 1; }
37.33333333% { right: 0px; opacity: 1; }
38.66666667% { right: 325px; opacity: 0; z-index: -1; }
40% { right: 325px; opacity: 0; z-index: -1; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cycleseven {
0%  { right: -325px; opacity: 0; }
38.66666667% { right: -325px; opacity: 0; }
40% { right: 0px; opacity: 1; }
44% { right: 0px; opacity: 1; }
45.33333333% { right: 325px; opacity: 0; z-index: -1; }
46.66666667% { right: 325px; opacity: 0; z-index: -1; }
100%{ right: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cycleeigth {
0%  { right: -325px; opacity: 0; }
45.33333333% { right: -325px; opacity: 0; }
46.66666667% { right: 0px; opacity: 1; }
50.66666667% { right: 0px; opacity: 1; }
52% { right: 325px; opacity: 0; z-index: -1; }
53.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cyclenine {
0%  { right: -325px; opacity: 0; }
52% { right: -325px; opacity: 0; }
53.33333333% { right: 0px; opacity: 1; }
57.33333333% { right: 0px; opacity: 1; }
58.66666667% { right: 325px; opacity: 0; z-index: -1; }
60% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cycleten {
0%  { right: -325px; opacity: 0; }
58.66666667% { right: -325px; opacity: 0; }
60% { right: 0px; opacity: 1; }
64% { right: 0px; opacity: 1; }
65.33333333% { right: 325px; opacity: 0; z-index: -1; }
66.66666667% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cycletenone {
0%  { right: -325px; opacity: 0; }
65.33333333% { right: -325px; opacity: 0; }
66.66666667% { right: 0px; opacity: 1; }
70.66666667% { right: 0px; opacity: 1; }
72% { right: 325px; opacity: 0; z-index: -1; }
73.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cycletentwo {
0%  { right: -325px; opacity: 0; }
72% { right: -325px; opacity: 0; }
73.33333333% { right: 0px; opacity: 1; }
77.33333333% { right: 0px; opacity: 1; }
78.66666667% { right: 325px; opacity: 0; z-index: -1; }
80% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cycletenthree {
0%  { right: -325px; opacity: 0; }
78.66666667% { right: -325px; opacity: 0; }
80% { right: 0px; opacity: 1; }
84% { right: 0px; opacity: 1; }
85.33333333% { right: 325px; opacity: 0; z-index: -1; }
86.66666667% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cycletenfour {
0%  { right: -325px; opacity: 0; }
85.33333333% { right: -325px; opacity: 0; }
86.66666667% { right: 0px; opacity: 1; }
90.66666667% { right: 0px; opacity: 1; }
92% { right: 325px; opacity: 0; z-index: -1; }
93.33333333% { right: 325px; opacity: 0; z-index: -1; }
100% { right: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cycletenfive {
0%  { right: -325px; opacity: 0; }
92% { right: -325px; opacity: 0; }
93.33333333% { right: 0px; opacity: 1; }
97.33333333% { right: 0px; opacity: 1; }
98.66666667% { right: 325px; opacity: 0; z-index: -1; }
100%{ right: 325px; opacity: 0; z-index: 0; }

}
 

 

/*-- /Slide Produtos--*/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito