CSS3 コンテンツスライダー

1. コンテンツスライダー
.slider{
position:relative;
width:600px;
height:200px;
overflow:hidden;
border:#666 1px solid;
-webkit-box-shadow:rgba(0,0,0,0.5) 2px 2px 2px;
}
.slider::before,
.slider::after{
content:"";
position:absolute;
top:50%;
left:50%;
display:block;
width: 6px;
height:30px;
background:#fff;
z-index: 10;
-webkit-transform: rotate(-1deg) scale(0);
}
.slider::before{
margin:-15px 0 0 -15px;
}
.slider::after{
margin:-15px 0 0 0px;
}
.slider:hover::before,
.slider:hover::after{
-webkit-transform: rotate(-1deg) scale(1);
}
.slider:hover .slideLi,
.slider:hover .progress,
.slider:hover .slideMark li:nth-child(1),
.slider:hover .slideMark li:nth-child(2),
.slider:hover .slideMark li:nth-child(3),
.slider:hover .slideMark li:nth-child(4){
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
.slider:hover{
-webkit-transform: rotate(1deg) scale(1.05);
-webkit-transition: all 0.4s ease-in-out;
}
.slider .slideLi{
position:absolute;
top:0;
left:0;
width:2400px;
height:200px;
-webkit-animation:slide 20s infinite;
}
.slider .slideLi li{
position:relative;
display: block;
width:600px;
height:200px;
float: left;
}
.slider a{
display:block;
position:relative;
width:600px;
height:200px;
}
.slider a:hover{background:#000;}
.slider a:hover img{opacity: 0.55;}
.slider>.slideLi>li img{
display:block;
}
@-webkit-keyframes slide{
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.3;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.3;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.3;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
.progress{
position:absolute;
bottom:0px;
left:0;
width:600px;
height:2px;
background:#f98131;
-webkit-animation:progress 5s infinite;
}
@-webkit-keyframes progress{
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
88% {width:600px; opacity:1;}
92% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
.slideMark{
position:absolute;
top:3px;
right:0px;
margin:5px 15px 0 0;
}
.slideMark li{
display:block;
float:left;
margin-left: 5px;
background:#ccc;
border:#fff 1px solid;
width:6px;
height:6px;
-webkit-border-radius:6px;
}
.slideMark li:nth-child(1){-webkit-animation:mark1 20s infinite;}
.slideMark li:nth-child(2){-webkit-animation:mark2 20s infinite;}
.slideMark li:nth-child(3){-webkit-animation:mark3 20s infinite;}
.slideMark li:nth-child(4){-webkit-animation:mark4 20s infinite;}
@-webkit-keyframes mark1{0% {background:#f98131;}24%{background:#f98131;}25%{background:#ccc;}100% {background:#ccc;}}
@-webkit-keyframes mark2{0% {background:#ccc;}24%{background:#ccc;}25%{background:#f98131;}49%{background:#f98131;}50% {background:#ccc;}100% {background:#ccc;}}
@-webkit-keyframes mark3{0% {background:#ccc;}49%{background:#ccc;}50%{background:#f98131;}74%{background:#f98131;}75% {background:#ccc;}100% {background:#ccc;}}
@-webkit-keyframes mark4{0% {background:#ccc;}74%{background:#ccc;}75%{background:#f98131;}98%{background:#f98131;}99% {background:#ccc;}100% {background:#ccc;}}