Código css3 do slideshow automático

@charset "utf-8";
body{
text-align:center;

}
h2{
font-family: 'Creepster', cursive;
font-size: 50px;
color: #999;

box-shadow: 1px 1px 5px rgba (0,0,0,0.5);

width: 980px;
text-align: center;
}

#slider{
background: #000;
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
height: 320px;
width: 680px;
margin: auto;
margin-top: auto;
overflow: visible;
position: relative;

}

#mascara {

overflow: hidden;
height: 320px;
}

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

#slider li {
width: 680px;
height: 320px;
position: absolute;
left: -325px;
list-style: none;
}

#slider li.primeira-anima {
animation: cycle 25s linear infinite;
-moz-animation: cycle 25s linear infinite;
-webkit-animation: cycle 25s linear infinite;
-ms-animation: cycle 25s linear infinite;
-o-animation: cycle 25s linear infinite;
}

#slider li.segunda-anima {
animation: cycletwo 25s linear infinite;
-moz-animation: cycletwo 25s linear infinite;
-webkit-animation: cycletwo 25s linear infinite;
-ms-animation: cycletwo 25s linear infinite;

-o-animation: cycletwo 25s linear infinite;
}

#slider li.terceira-anima {
animation: cyclethree 25s linear infinite;
-moz-animation: cyclethree 25s linear infinite;
-webkit-animation: cyclethree 25s linear infinite;
-ms-animation: cyclethree 25s linear infinite;
-o-animation: cyclethree 25s linear infinite;
}

#slider li.quarta-anima {
animation: cyclefour 25s linear infinite;
-moz-animation: cyclefour 25s linear infinite;
-webkit-animation: cyclefour 25s linear infinite;
-ms-animation: cyclefour 25s linear infinite;
-o-animation: cyclefour 25s linear infinite;
}

#slider li.quinta-anima {
animation: cyclefive 25s linear infinite;
-moz-animation: cyclefive 25s linear infinite;
-webkit-animation: cyclefive 25s linear infinite;
-ms-animation: cyclefive 25s linear infinite;
-o-animation: cyclefive 25s linear infinite;
}

@keyframes cycle {
0% { left: 0px; }
4% { left: 0px; }
16% { left: 0px; opacity:1; z-index:0; }

20% { left: 325px; opacity: 0; z-index: 0; }
21% { left: -325px; opacity: 0; z-index: -1; }
92% { left: -325px; opacity: 0; z-index: 0; }
96% { left: -325px; opacity: 0; }
100%{ left: 0px; opacity: 1; }
}

@keyframes cycletwo {
0% { left: -325px; opacity: 0; }
16% { left: -325px; opacity: 0; }
20% { left: 0px; opacity: 1; }
100%{ left: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
36% { left: -325px; opacity: 0; }
}

@keyframes cyclefour {

56% { left: -325px; opacity: 0; }
}
@keyframes cyclefive {
76% { left: -325px; opacity: 0; }
100%{ left: 325px; opacity: 0; z-index: 0; }
}

@-moz-keyframes cycle {
0% { left: 0px; }
4% { left: 0px; }
96% { left: -325px; opacity: 0; }
}

@-moz-keyframes cycletwo {

16% { left: -325px; opacity: 0; }
}

@-moz-keyframes cyclethree {
36% { left: -325px; opacity: 0; }
}

@-moz-keyframes cyclefour {
56% { left: -325px; opacity: 0; }
}

@-moz-keyframes cyclefive {
76% { left: -325px; opacity: 0; }
}

/*@-webkit-keyframes cycle {
0% { top: 0px; }
4% { top: 0px; }
16% { top: 0px; opacity:1; z-index:0; }
20% { top: 325px; opacity: 0; z-index: 0; }
21% { top: -325px; opacity: 0; z-index: -1; }
92% { top: -325px; opacity: 0; z-index: 0; }
96% { top: -325px; opacity: 0; }
100%{ top: 0px; opacity: 1; }
}

@-webkit-keyframes cycletwo {
0% { top: -325px; opacity: 0; }
16% { top: -325px; opacity: 0; }
20% { top: 0px; opacity: 1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-webkit-keyframes cyclethree {
0% { top: -325px; opacity: 0; }
36% { top: -325px; opacity: 0; }
}

@-webkit-keyframes cyclefour {
0% { top: -325px; opacity: 0; }
56% { top: -325px; opacity: 0; }
}
@-webkit-keyframes cyclefive {
0% { top: -325px; opacity: 0; }
76% { top: -325px; opacity: 0; }
100%{ top: 325px; opacity: 0; z-index: 0; }
}*/

@-webkit-keyframes cycle {

0% { left:0px; }
4% { left:0px; }
16% { left:0px; opacity:1; z-index:0; }
21% { left:-325px; opacity:0; z-index:-1; }
92% { left:-325px; opacity:0; z-index:0; }
96% { left:-325px; opacity:0; }
100%{ left:0px; opacity:1; }

}
@-webkit-keyframes cycletwo {
20% { left:0px; opacity:1; }
100%{ left:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
}

@-webkit-keyframes cyclefour {
}
@-webkit-keyframes cyclefive {
100%{ left:325px; opacity:0; z-index:0; }
}
@-ms-keyframes cycle {
0% { left: 0px; }
4% { left: 0px; }
96% { left: -325px; opacity: 0; }
}

@-ms-keyframes cycletwo {

16% { left: -325px; opacity: 0; }
}

@-ms-keyframes cyclethree {
36% { left: -325px; opacity: 0; }
}

@-ms-keyframes cyclefour {
56% { left: -325px; opacity: 0; }
}
@-ms-keyframes cyclefive {

76% { left: -325px; opacity: 0; }
}

@-o-keyframes cycle {
0% { left: 0px; }
4% { left: 0px; }
96% { left: -325px; opacity: 0; }
}

@-o-keyframes cycletwo {
16% { left: -325px; opacity: 0; }
}

@-o-keyframes cyclethree {
36% { left: -325px; opacity: 0; }
}

@-o-keyframes cyclefour {
56% { left: -325px; opacity: 0; }
}
@-o-keyframes cyclefive {
76% { left: -325px; opacity: 0; }
}
.barra-progresso {
position: relative;

top: -5px;
width: 680px;
height: 5px;
background: #000;
animation: fullexpand 25s ease-out infinite;
}

@keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}

@-ms-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-o-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

#slider:hover li,
#slider:hover .barra-progresso
{
animation-play-state: paused;
}

Código css3 do slideshow automático

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to Código css3 do slideshow automático

Similar to Código css3 do slideshow automático (12)

Recently uploaded

Recently uploaded (20)

Código css3 do slideshow automático