Подборка интересных CSS слайдеров
Большая коллекция слайдеров созданных с использованием только HTML/CSS без применения скриптов. Работают во всех современных браузерах. Примеры можно не только посмотреть по ссылке, но и сразу изменять под свои требования.
1. CSS Slider
HTML
<div class=”slider”>
<div class=”slide”>
<img src=”http://41.media.tumblr.com/dd8b92562e9c2478b306a78d31bc7f3b/tumblr_nox58hMPro1smipnlo1_1280.jpg” />
</div>
<div class=”slide”>
<img src=”http://41.media.tumblr.com/5f1faadc39daaaf7e99d161f28fe260b/tumblr_n5y43dNgq61sa8qlko1_1280.jpg” />
</div>
<div class=”slide”>
<img src=”http://41.media.tumblr.com/13d4502083deff05ced351661ad2f9c7/tumblr_njglfsx2ur1qhzitko1_1280.jpg” />
</div>
<div class=”slide”>
<img src=”http://40.media.tumblr.com/5e3e7efb251948ca07bec0c0e838371c/tumblr_ncb3prZ29n1tcmhipo1_1280.jpg”/>
</div>
<div class=”slide”>
<img src=”http://41.media.tumblr.com/dd8b92562e9c2478b306a78d31bc7f3b/tumblr_nox58hMPro1smipnlo1_1280.jpg” />
</div>
</div>
</div>
CSS
position: relative;
width: 90%;
max-width: 1200px;
margin: 5% auto;
overflow: hidden;
}
.slider {
position: relative;
width: 500%;
animation: h_slide infinite ease-in-out 20s;
}
.slide {
width: 20%;
height: 600px;
float: left;
overflow: hidden;
}
img {
position: relative;
max-width: 100%;
top: 50%;
transform: translateY(-50%);
}
@keyframes h_slide {
0% {
left: 0%; }
20% {
left: 0%; }
25% {
left: -100%; }
45% {
left: -100%; }
50% {
left: -200%; }
70% {
left: -200%; }
75% {
left: -300%; }
95% {
left: -300%; }
100% {
left: -400%; }
}
2. Minimal pure css slider
HTML
<img class=’photo’ src=”http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg” alt=”” />
<img class=’photo’ src=”http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg” alt=”” />
<img class=’photo’ src=”http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg” alt=”” />
<img class=’photo’ src=”http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg” alt=”” /></div>
CSS
margin:50px auto;
width:500px;
height:300px;
overflow:hidden;
border:10px solid;
border-top-color:#856036;
border-left-color:#5d4426;
border-bottom-color:#856036;
border-right-color:#5d4426;
position:relative;}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;}
@keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
3. Simple CSS Slider
HTML
<div id=”sliderImages”>
<img id=”si_1″ src=”http://f.cybrox.eu/codepen/slider/slide1.jpg” alt=”” />
<img id=”si_2″ src=”http://f.cybrox.eu/codepen/slider/slide2.jpg” alt=”” />
<img id=”si_3″ src=”http://f.cybrox.eu/codepen/slider/slide3.jpg” alt=”” />
<img id=”si_4″ src=”http://f.cybrox.eu/codepen/slider/slide4.jpg” alt=”” />
<img id=”si_5″ src=”http://f.cybrox.eu/codepen/slider/slide5.jpg” alt=”” />
<div style=”clear:left;”></div>
</div>
</div>
CSS
width: 800px;
height: 300px;
overflow: hidden;
border: 10px solid #666;
}#sliderImages {
width : 4000px;
height: 300px;
overflow: hidden;/* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
animation: slide 16s infinite;
-moz-animation: slide 16s infinite;
-webkit-animation: slide 16s infinite;
-o-animation: slide 16s infinite;
}#sliderImages img {
float: left;
}@keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
97%{margin-left: -3200px;}
100%{margin-left: 0px;}
}@-moz-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
}@-webkit-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
}
@-o-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
}
4. Basic slider full screen CSS3
HTML
<img src=”http://i.imgur.com/iLFS6JK.jpg” />
<img src=”http://i.imgur.com/R32uG9K.jpg” />
<img src=”http://i.imgur.com/oeXeCU1.jpg” />
<img src=”http://i.imgur.com/V3Fe50P.jpg” />
CSS
position: fixed;
width: 100%;
height: 100%;
}img:nth-child(5) {
animation: efecto_fade 30s 0s infinite;
}img:nth-child(4) {
animation: efecto_fade 30s 6s infinite;
}img:nth-child(3) {
animation: efecto_fade 30s 12s infinite;
}img:nth-child(2) {
animation: efecto_fade 30s 18s infinite;
}img:nth-child(1) {
animation: efecto_fade 30s 24s infinite;
}@keyframes efecto_fade {
17% { opacity:1; }
25% { opacity:0; }
90% { opacity:0; }
}
5. Pure CSS3 slider
HTML
<div id=”slider”>
<div class=”slides”>
<div class=”slider”>
<div class=”legend”></div>
<div class=”content”>
<div class=”content-txt”>
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class=”image”>
<img src=”http://img11.hostingpics.net/pics/767361311.jpg”>
</div>
</div>
<div class=”slider”>
<div class=”legend”></div>
<div class=”content”>
<div class=”content-txt”>
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class=”image”>
<img src=”http://img11.hostingpics.net/pics/412998972.jpg”>
</div>
</div>
<div class=”slider”>
<div class=”legend”></div>
<div class=”content”>
<div class=”content-txt”>
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class=”image”>
<img src=”http://img11.hostingpics.net/pics/990696943.jpg”>
</div>
</div>
<div class=”slider”>
<div class=”legend”></div>
<div class=”content”>
<div class=”content-txt”>
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class=”image”>
<img src=”http://img11.hostingpics.net/pics/601549194.jpg”>
</div>
</div>
</div>
<div class=”switch”>
<ul>
<li>
<div class=”on”></div>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS
#slider{
width:100%;
height:500px;
position:relative;
overflow:hidden;
}
@keyframes load{
from{left:-100%;}
to{left:0;}
}
.slides{
width:400%;
height:100%;
position:relative;
-webkit-animation:slide 30s infinite;
-moz-animation:slide 30s infinite;
animation:slide 30s infinite;
}
.slider{
width:25%;
height:100%;
float:left;
position:relative;
z-index:1;
overflow:hidden;
}
.slide img{
width:100%;
height:100%;
}
.slide img{
width:100%;
height:100%;
}
.image{
width:100%;
height:100%;
}
.image img{
width:100%;
height:100%;
}/* Legend */
.legend{
border:500px solid transparent;
border-left:800px solid rgba(52, 73, 94, .7);
border-bottom:0;
position:absolute;
bottom:0;
}/* Contents */
.content{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.content-txt{
width:400px;
height:150px;
float:left;
position:relative;
top:300px;
-webkit-animation:content-s 7.5s infinite;
-moz-animation:content-s 7.5s infinite;
animation:content-s 7.5s infinite;
}
.content-txt h1{
font-family:Intro;
font-size:24px;
color:#fff;
text-align:left;
margin-left:30px;
padding-bottom:10px;
}
.content-txt h2{
font-family:Quicksand;
font-weight:normal;
font-size:14px;
font-style:italic;
color:#fff;
text-align:left;
margin-left:30px;
}/* Switch */
.switch{
width:120px;
height:10px;
position:absolute;
bottom:50px;
z-index:99;
left:30px;
}
.switch > ul{
list-style:none;
}
.switch > ul > li{
width:10px;
height:10px;
border-radius:50%;
background:#333;
float:left;
margin-right:5px;
cursor:pointer;
}
.switch ul{
overflow:hidden;
}
.on{
width:100%;
height:100%;
border-radius:50%;
background:#f39c12;
position:relative;
-webkit-animation:on 30s infinite;
-moz-animation:on 30s infinite;
animation:on 30s infinite;
}/* Animation */
@-webkit-keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
@-moz-keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
@keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}@-webkit-keyframes content-s{
0%{left:-420px;}
10%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
@-moz-keyframes content-s{
0%{left:-420px;}
10%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
@keyframes content-s{
0%{left:-420px;}
10%{left:20px;}
15%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}@-webkit-keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
@-moz-keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
@keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
6. AutoPlay Responsive CSS only Slider
HTML
<div class=”rotator-wrap”>
<ul class=”rotator”>
<li> <div><img src=”http://lorempixel.com/200/200/cats/1″ alt=”” /></div> </li>
<li> <div><img src=”http://lorempixel.com/200/200/cats/2″ alt=”” /></div> </li>
<li> <div><img src=”http://lorempixel.com/200/200/cats/3″ alt=”” /></div> </li>
<li> <div><img src=”http://lorempixel.com/200/200/cats/4″ alt=”” /></div> </li>
<li> <div><img src=”http://lorempixel.com/200/200/cats/5″ alt=”” /></div> </li>
<li> <div><img src=”http://lorempixel.com/200/200/cats/6″ alt=”” /></div> </li>
<li> <div><img src=”http://lorempixel.com/200/200/cats/7″ alt=”” /></div> </li>
<li> <div><img src=”http://lorempixel.com/200/200/cats/8″ alt=”” /></div> </li>
</ul>
</div>
</div>
CSS
@-webkit-keyframes slide {
0% { margin:0; }
5%,50% { margin:0 0 0 -100%; }
55%, 100% { margin:0; }
}
@-moz-keyframes slide {
0% { margin:0; }
5%,50% { margin:0 0 0 -100%; }
55%,100% { margin:0; }
}
@-ms-keyframes slide {
0% { margin:0; }
5%,50% { margin:0 0 0 -100%; }
55%,100% { margin:0; }
}
@-o-keyframes slide {
0% { margin:0; }
5%,50% { margin:0 0 0 -100%; }
55%,100% { margin:0; }
}
@keyframes slide {
0% { margin:0; }
5%,50% { margin:0 0 0 -100%; }
55%,100% { margin:0; }
}/*Mobile*/
@-webkit-keyframes slide_mobile {
0%, 22% { margin:0; }
25%, 47% { margin:0 0 0 -100%; }
50%, 72% { margin:0 0 0 -200%; }
75%, 97% { margin:0 0 0 -300%; }
100% { margin:0; }
}@-moz-keyframes slide_mobile {
0%, 22% { margin:0; }
25%, 47% { margin:0 0 0 -100%; }
50%, 72% { margin:0 0 0 -200%; }
75%, 97% { margin:0 0 0 -300%; }
100% { margin:0; }
}@-ms-keyframes slide_mobile {
0%, 22% { margin:0; }
25%, 47% { margin:0 0 0 -100%; }
50%, 72% { margin:0 0 0 -200%; }
75%, 97% { margin:0 0 0 -300%; }
100% { margin:0; }
}@-o-keyframes slide_mobile {
0%, 22% { margin:0; }
25%, 47% { margin:0 0 0 -100%; }
50%, 72% { margin:0 0 0 -200%; }
75%, 97% { margin:0 0 0 -300%; }
100% { margin:0; }
}@keyframes slide_mobile {
0%, 22% { margin:0; }
25%, 47% { margin:0 0 0 -100%; }
50%, 72% { margin:0 0 0 -200%; }
75%, 97% { margin:0 0 0 -300%; }
100% { margin:0; }
}body {
background:#b7d3f2;
color:#5276a0;
}
.container {
width:100%;
}
.rotator-wrap {
overflow:hidden;
position:relative;
min-height:100px;
width:100%;
border-radius:5px;
}
.rotator {
width:200%;
overflow:hidden;
margin:0;
list-style:none;
padding:0;
background: #7ea1c8; /* Old browsers */
background: -moz-linear-gradient(left, #7ea1c8 0%, #3d6ea5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b7d3f2), color-stop(100%,#3d6ea5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #b7d3f2 0%,#3d6ea5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #b7d3f2 0%,#3d6ea5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #b7d3f2 0%,#3d6ea5 100%); /* IE10+ */
background: linear-gradient(to right, #b7d3f2 0%,#3d6ea5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#7ea1c8′, endColorstr=’#3d6ea5′,GradientType=1 ); /* IE6-9 */
/*Change the length of the animation here*/
-webkit-animation: slide 10s infinite ease-out 5s;
-moz-animation: slide 15s infinite ease-out 5s;
-ms-animation: slide 15s infinite ease-out 5s;
-o-animation: slide 15s infinite ease-out 5s;
animation: slide 15s infinite ease-out 5s;
}
.rotator > li {
padding:15px;
width:12.5%;
float:left;
margin:0;
box-sizing:border-box;
-webkit-transition:margin .2s ease-out;
-moz-transition:margin .2s ease-out;
-ms-transition:margin .2s ease-out;
-o-transition:margin .2s ease-out;
transition:margin .2s ease-out;
}
.rotator > li:hover {
margin:-7px 0 0 0;
cursor:pointer;
}
.rotator > li > div {
background:#999;
width:100%;
height:100%;
line-height: 0;
border-radius:50%;
overflow:hidden;
box-shadow:0 5px 5px 0px rgba(0,0,0,.7);
-webkit-transition: box-shadow .2s ease-out;
-moz-transition:box-shadow .2s ease-out;
-ms-transition:box-shadow .2s ease-out;
-o-transition:box-shadow .2s ease-out;
transition:box-shadow .2s ease-out;
}
.rotator > li:hover > div {
box-shadow:0 20px 15px -10px rgba(0,0,0,.3);
}
img {
width:100%;
}
@media only screen and (max-width: 767px) {
.rotator {
width:266%;
}
}
@media only screen and (max-width: 520px) {
.rotator {
width:400%;
-webkit-animation: slide_mobile 25s infinite ease-out;
-moz-animation: slide_mobile 25s infinite ease-out;
-ms-animation: slide_mobile 25s infinite ease-out;
-o-animation: slide_mobile 25s infinite ease-out;
animation: slide_mobile 25s infinite ease-out;
}
}
7. Easy CSS Slider With Thumbnails from Left
HTML
<div class=”container”>
<a href=”#”>
<img class=”thumb” src=”http://designshack.net/tutorialexamples/thumbslider/thumb1.jpg”>
<img class=”big” src=”http://designshack.net/tutorialexamples/thumbslider/big1.jpg”>
</a><a href=”#”>
<img class=”thumb” src=”http://designshack.net/tutorialexamples/thumbslider/thumb2.jpg”>
<img class=”big” src=”http://designshack.net/tutorialexamples/thumbslider/big2.jpg”>
</a><a href=”#”>
<img class=”thumb” src=”http://designshack.net/tutorialexamples/thumbslider/thumb3.jpg”>
<img class=”big” src=”http://designshack.net/tutorialexamples/thumbslider/big3.jpg”>
</a><a href=”#”>
<img class=”thumb” src=”http://designshack.net/tutorialexamples/thumbslider/thumb4.jpg”>
<img class=”big” src=”http://designshack.net/tutorialexamples/thumbslider/big4.jpg”>
</a><a href=”#”>
<img class=”big featured” src=”http://designshack.net/tutorialexamples/thumbslider/featured.jpg”>
</a>
</div>
CSS
/*GENERAL*/
* {
margin: 0px;
padding: 0px;
}
/*MENU*/
.menu {
position: fixed;
top: 20px;
left: 0;
background-color: #000;
background-color: rgba(0,0,0,0.3);
font: 12px/0.9 Helvetica, Arial, sans-serif;
}
.menu ul {
list-style-type: none;
}
.menu a {
color: #fff;
text-decoration: none;
}
.menu a:hover {
text-decoration: underline;
}
/*SLIDER*/
.container {
position: relative;
height: 660px;
width: 960px;
overflow: hidden;
margin: 0 auto;
}
.big {
position: absolute;
top:260px;
left:-1000px;
-webkit-transition: left 1s ease;
-moz-transition: left 1s ease;
-o-transition: left 1s ease;
-ms-transition: left 1s ease;
transition: left 1s ease;
}
a {
float: left;
margin: 20px;
}
a:hover .thumb {
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
a:hover .big {
left: 20px;
}
.featured {
top: 260px;
left: 20px;
z-index: -3;
}
8. CSS Slider
HTML
<a class=”resim1″><img src=”http://lorempixel.com/800/330/cats”><span>Kediler</span></a>
<a class=”resim2″><img src=”http://lorempixel.com/800/330/nightlife”><span>Gece Hayatı</span></a>
<a class=”resim3″><img src=”http://lorempixel.com/800/330/fashion”><span>Moda</span></a>
<a class=”resim4″><img src=”http://lorempixel.com/800/330/food”><span>Yemek</span></a>
<a class=”resim5″><img src=”http://lorempixel.com/800/330/technics”><span>Teknik</span></a>
</div>
</div>
CSS
width:800px;
height:330px;
overflow: hidden;
position: relative;
}
.resim1, .resim2, .resim3, .resim4, .resim5 {
position: absolute;
width:800px;
height:330px;
}.aw-slider > div > a > span{
position:absolute;
display:table;
background-color:black;
color:white;
right:0;
bottom:0;
padding:5px 10px;
}.resim1{left: 0;}
.resim2{left: 800px;}
.resim3{left: 1600px;}
.resim4{left: 2400px;}
.resim5{left: 3200px;}.aw-slider > div {
width: 3200px;
height: 330px;
left:0px;
position: absolute;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-name: gecisler;
-moz-animation-duration: 20s;
-moz-animation-iteration-count:infinite;
-moz-animation-name: gecisler;
-ms-animation-duration: 20s;
-ms-animation-iteration-count:infinite;
-ms-animation-name: gecisler;
animation-duration: 20s;
animation-iteration-count:infinite;
animation-name: gecisler;
}
.aw-slider > div img{
opacity: 0.9;
filter: alpha(opacity=95);
}.aw-slider > div img:hover{
opacity: 1;
filter: alpha(opacity=100);
}.aw-slider > div:hover{
-webkit-animation-play-state:paused;
/* Bu CSS tanımı Chrome 4.0, IE10, Firefox 16, Safari 4, Opera 15 ve üstü versiyonlarda çalışmaktadır*/
}@-webkit-keyframes gecisler {
0% {left:0px;}
10% {left:0px;}
20% {left:-800px;}
30% {left:-800px;}
40% {left:-1600px;}
50% {left:-1600px;}
60% {left:-2400px;}
70% {left:-2400px;}
80% {left:-3200px;}
90% {left:-3200px;}
}
@-moz-keyframes gecisler {
0% {left:0px;}
10% {left:0px;}
20% {left:-800px;}
30% {left:-800px;}
40% {left:-1600px;}
50% {left:-1600px;}
60% {left:-2400px;}
70% {left:-2400px;}
80% {left:-3200px;}
90% {left:-3200px;}
}
@-ms-keyframes gecisler {
0% {left:0px;}
10% {left:0px;}
20% {left:-800px;}
30% {left:-800px;}
40% {left:-1600px;}
50% {left:-1600px;}
60% {left:-2400px;}
70% {left:-2400px;}
80% {left:-3200px;}
90% {left:-3200px;}
}
@keyframes gecisler {
0% {left:0px;}
10% {left:0px;}
20% {left:-800px;}
30% {left:-800px;}
40% {left:-1600px;}
50% {left:-1600px;}
60% {left:-2400px;}
70% {left:-2400px;}
80% {left:-3200px;}
90% {left:-3200px;}
}
9. fading images
HTML
<img src=”http://2.bp.blogspot.com/_bRNnsKPyfuA/S-QbZUS-DBI/AAAAAAAACLE/QREDE8w8vFM/s1600/flo45s.jpg” alt=””>
<img src=”http://1.bp.blogspot.com/_bRNnsKPyfuA/S-Qb1w_bF5I/AAAAAAAACN8/DgGdMhMZVUQ/s1600/Hibiscus+flowers.jpg” alt=””>
<img src=”http://3.bp.blogspot.com/_bRNnsKPyfuA/S-QbpvzKV2I/AAAAAAAACM8/wWJxvQHmQ04/s1600/flower2b.jpg” alt=””>
</div>
CSS
position:relative;
margin:30px auto;
width:400px;
}
#stage img{
position:absolute;
top:0;
left:0;
width:400px;
opacity:0;
animation-name:fading;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#stage img:nth-of-type(1){animation-delay: 0s;}
#stage img:nth-of-type(2){animation-delay: 5s;}
#stage img:nth-of-type(3){animation-delay: 10s;}
@keyframes fading {
0%{opacity:0; }
5%{opacity:1;}33%{opacity:1;}
38%{opacity:0;}100%{opacity:0;}
}
10. basic CSS slider, select & click start/pause
HTML
<input type=”radio” id=”img1″ name=”selection” />
<input type=”radio” id=”img2″ name=”selection” />
<input type=”radio” id=”img3″ name=”selection” />
<input type=”radio” id=”go” name=”selection” />
<input type=”radio” id=”stop” name=”selection” />
<div id=”slider”>
<picture id=”pic1″>
<img src=”http://lorempixel.com/300/200/nature/1″/>
</picture>
<picture id=”pic2″>
<img src=”http://lorempixel.com/300/200/nature/2″/>
</picture>
<picture id=”pic3″>
<img src=”http://lorempixel.com/300/200/nature/3″/>
</picture>
</div>
<p>
<label for=”img1″></label>
<label for=”img2″></label>
<label for=”img3″></label>
<label for=”go”></label>
<label for=”stop”></label>
</p>
CSS
width:300px;
margin:1em auto;
overflow:hidden;
background:tomato;
padding:0.5em;
box-shadow:0 0 5px;
}
input {
position:absolute;
left:-999px;
}
#slider {
position:relative;
height:200px;
white-space:nowrap;
font-size:0.01px;
}
#slider img {
position:absolute;
z-index:0;
animation:slide 6s infinite;
}
@keyframes slide {
0% , 100%{
z-index:0;
opacity:0;
}
50% {
z-index:1;
opacity:1
}
}
#pic1 img {
animation-delay:0s;
}
#pic2 img{
animation-delay:2s;
}
#pic3 img{
animation-delay:4s;
}
p {
text-align:center;
position:relative;
line-height:0em;
}
label[for^=”img”] {
border-radius:50%;
border:1px solid;
padding:5px;
font-size:0.01px;
margin:0 5px;
background:blue;
box-shadow:inset 2px 2px 2px turquoise, 0 0 5px;
}
label[for=’go’], label[for=’stop’]{
position:absolute;
right:1em;
}
label[for=’go’]:after {
content:’\25B6′;
display:none;
}
label[for=’stop’]:after {
content:’||’;
font-weight:bold;
text-shadow:1px 0 0,2px 0 0, 0 0 5px;
letter-spacing:2px
}
:checked ~#slider #pic1 img,
:checked ~#slider #pic2 img,
:checked ~#slider #pic3 img{
animation-play-state: paused;
}
:checked ~ p label[for=’stop’]:after {
display:none;
}
:checked ~ p label[for=’go’]:after,
#go:checked ~p label[for=”stop”]:after{
display:block;
}
#go:checked ~p label[for=”go”]:after {
display:none;
}
#img1:checked ~ #slider #pic1 img,
#img2:checked ~ #slider #pic2 img,
#img3:checked ~ #slider #pic3 img{
z-index:2!important;
opacity:1!important;
transition:0.5s;
animation-play-state: paused;
}
#go:checked ~#slider img {
animation-play-state: running;
}
label {
cursor:pointer;
display:inline-block;
}
11. Pure CSS Slider – autoplay, kenburns, prev/next, bullets
HTML
<input name=”cs_anchor1″ id=’cs_slide1_0′ type=”radio” class=’cs_anchor slide’ >
<input name=”cs_anchor1″ id=’cs_slide1_1′ type=”radio” class=’cs_anchor slide’ >
<input name=”cs_anchor1″ id=’cs_slide1_2′ type=”radio” class=’cs_anchor slide’ >
<input name=”cs_anchor1″ id=’cs_play1′ type=”radio” class=’cs_anchor’ checked>
<input name=”cs_anchor1″ id=’cs_pause1′ type=”radio” class=’cs_anchor’ >
<ul>
<div style=”width: 100%; visibility: hidden; font-size: 0px; line-height: 0;”>
<img src=”http://cssslider.com/sliders/pen/images/buns.jpg” style=”width: 100%;”>
</div>
<li class=’num0 img’>
<a href=”http://cssslider.com” target=””><img src=’http://cssslider.com/sliders/pen/images/buns.jpg’ alt=’Buns’ title=’Buns’ /> </a>
</li>
<li class=’num1 img’>
<a href=”http://cssslider.com” target=””><img src=’http://cssslider.com/sliders/pen/images/buns.jpg’ alt=’Croissant’ title=’Croissant’ /> </a>
</li>
<li class=’num2 img’>
<a href=”http://cssslider.com” target=””><img src=’http://cssslider.com/sliders/pen/images/buns.jpg’ alt=’Lemon pie’ title=’Lemon pie’ /> </a>
</li></ul>
<div class=’cs_description’>
<label class=’num0′>
<span class=”cs_title”><span class=”cs_wrapper”>Buns</span></span>
</label>
<label class=’num1′>
<span class=”cs_title”><span class=”cs_wrapper”>Croissant</span></span>
</label>
<label class=’num2′>
<span class=”cs_title”><span class=”cs_wrapper”>Lemon pie</span></span>
</label>
</div><div class=’cs_arrowprev’>
<label class=’num0′ for=’cs_slide1_0′></label>
<label class=’num1′ for=’cs_slide1_1′></label>
<label class=’num2′ for=’cs_slide1_2′></label>
</div>
<div class=’cs_arrownext’>
<label class=’num0′ for=’cs_slide1_0′></label>
<label class=’num1′ for=’cs_slide1_1′></label>
<label class=’num2′ for=’cs_slide1_2′></label>
</div><div class=’cs_bullets’>
<label class=’num0′ for=’cs_slide1_0′>
<span class=’cs_point’></span>
<span class=’cs_thumb’><img src=’http://cssslider.com/sliders/pen/tooltips/buns.jpg’ alt=’Buns’ title=’Buns’ /></span>
</label>
<label class=’num1′ for=’cs_slide1_1′>
<span class=’cs_point’></span>
<span class=’cs_thumb’><img src=’http://cssslider.com/sliders/pen/tooltips/croissant.jpg’ alt=’Croissant’ title=’Croissant’ /></span>
</label>
<label class=’num2′ for=’cs_slide1_2′>
<span class=’cs_point’></span>
<span class=’cs_thumb’><img src=’http://cssslider.com/sliders/pen/tooltips/lemonpie.jpg’ alt=’Lemon pie’ title=’Lemon pie’ /></span>
</label>
</div>
</div>
CSS
font-family:Roboto;
}
.text-1 a{
color: #000000;
text-decoration: none;
}
.csslider1 {
display: inline-block;
position: relative;
max-width: 480px;width: 100%;
margin-top: 10px;
}
.csslider1 > .cs_anchor {
display: none;
}
.csslider1 > ul {
position: relative;
z-index: 1;
font-size: 0;
line-height: 0;
margin: 0 auto;
padding: 0;overflow: hidden;
white-space: nowrap;
}
.csslider1 > ul > li.img img {
width: 100%;
}
.csslider1 > ul > li.img {
font-size: 0pt;-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
.csslider1 > ul > li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
white-space: normal;
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.csslider1 .cs_lnk{
position: absolute;
top: -9999px;
left: -9999px;
font-size: 0pt;
opacity: 0;
filter: alpha(opacity=0);
}.csslider1 > .cs_arrowprev,
.csslider1 > .cs_arrownext {
position: absolute;
top: 50%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 5;
}
.csslider1 > .cs_arrowprev > label,
.csslider1 > .cs_arrownext > label {
position: absolute;text-decoration: none;
cursor: pointer;
opacity: 0;
z-index: -1;
}
.csslider1 > .cs_arrowprev {
left: 0;
}
.csslider1 > .cs_arrownext {
right: 0;
}
.csslider1 > .cs_arrowprev > label.num2,
.csslider1 > .cs_arrownext > label.num1 {
opacity: 1;
z-index: 5;
}
.csslider1 > .slide:checked ~ .cs_arrowprev > label,
.csslider1 > .slide:checked ~ .cs_arrownext > label {
opacity: 0;
z-index: -1;
}
.csslider1 > #cs_slide1_0:checked ~ .cs_arrowprev > label.num2,
.csslider1 > #cs_slide1_0:checked ~ .cs_arrownext > label.num1,
.csslider1 > #cs_slide1_1:checked ~ .cs_arrowprev > label.num0,
.csslider1 > #cs_slide1_1:checked ~ .cs_arrownext > label.num2,
.csslider1 > #cs_slide1_2:checked ~ .cs_arrowprev > label.num1,
.csslider1 > #cs_slide1_2:checked ~ .cs_arrownext > label.num0 {
opacity: 1;
z-index: 5;
}
/* calculate autoplay */
@-webkit-keyframes arrow {
0%, 33.32333333333334% { opacity: 1; z-index: 5; }
33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
@-moz-keyframes arrow {
0%, 33.32333333333334% { opacity: 1; z-index: 5; }
33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
@-ms-keyframes arrow {
0%, 33.32333333333334% { opacity: 1; z-index: 5; }
33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
@-o-keyframes arrow {
0%, 33.32333333333334% { opacity: 1; z-index: 5; }
33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
@keyframes arrow {
0%, 33.32333333333334% { opacity: 1; z-index: 5; }
33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
.csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num2,
.csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num1,
.csslider1 > #cs_pause1:checked ~ .cs_arrowprev > label.num2,
.csslider1 > #cs_pause1:checked ~ .cs_arrownext > label.num1 {
-webkit-animation: arrow 24000ms infinite -2000ms;
-moz-animation: arrow 24000ms infinite -2000ms;
-ms-animation: arrow 24000ms infinite -2000ms;
-o-animation: arrow 24000ms infinite -2000ms;
animation: arrow 24000ms infinite -2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num0,
.csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num2,
.csslider1 > #cs_pause1:checked ~ .cs_arrowprev > label.num0,
.csslider1 > #cs_pause1:checked ~ .cs_arrownext > label.num2 {
-webkit-animation: arrow 24000ms infinite 6000ms;
-moz-animation: arrow 24000ms infinite 6000ms;
-ms-animation: arrow 24000ms infinite 6000ms;
-o-animation: arrow 24000ms infinite 6000ms;
animation: arrow 24000ms infinite 6000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num1,
.csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num0,
.csslider1 > #cs_pause1:checked ~ .cs_arrowprev > label.num1,
.csslider1 > #cs_pause1:checked ~ .cs_arrownext > label.num0 {
-webkit-animation: arrow 24000ms infinite 14000ms;
-moz-animation: arrow 24000ms infinite 14000ms;
-ms-animation: arrow 24000ms infinite 14000ms;
-o-animation: arrow 24000ms infinite 14000ms;
animation: arrow 24000ms infinite 14000ms;
}
.csslider1.cs_pauseHover:hover > .cs_arrowprev > label,
.csslider1 > #cs_pause1:checked ~ .cs_arrowprev > label,
.csslider1.cs_pauseHover:hover > .cs_arrownext > label,
.csslider1 > #cs_pause1:checked ~ .cs_arrownext > label {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.csslider1 > .slide:checked ~ .cs_arrowprev > label,
.csslider1 > .slide:checked ~ .cs_arrownext > label {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
/* /calculate autoplay */
.csslider1 > .cs_bullets {
position: absolute;
left: 0;
width: 100%;
z-index: 6;
font-size: 0;
line-height: 8pt;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider1 > .cs_bullets > div {
margin-left: -50%;
width: 100%;
}
.csslider1 > .cs_bullets > label {
position: relative;
display: inline-block;
cursor: pointer;
}
.csslider1 > .cs_bullets > label > .cs_thumb {
visibility: hidden;
position: absolute;
opacity: 0;
z-index: 1;
line-height: 0;
left: -44px;
top: -48px;
}.csslider1 > .cs_description {
z-index: 3;
}
.csslider1 > .cs_description a,
.csslider1 > .cs_description a:visited,
.csslider1 > .cs_description a:active {
color: inherit;
}
.csslider1 > .cs_description a:hover {
text-decoration: none;
}
.csslider1 > .cs_description > label {
position: absolute;
word-wrap: break-word;
white-space: normal;
text-align: left;
max-width: 50%;
left: 0;
}
.csslider1 > .cs_description > label > span {
vertical-align: top;
}
.csslider1 > .cs_description > label span {
display: inline-block;
}
.csslider1 > ul > li {
position: absolute;
left: 0;
top: 0;
display: inline-block;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 2000ms ease, -webkit-transform 24000ms linear;
-moz-transition: opacity 2000ms ease, -moz-transform 24000ms linear;
-ms-transition: opacity 2000ms ease, -ms-transform 24000ms linear;
-o-transition: opacity 2000ms ease, -o-transform 24000ms linear;
transition: opacity 2000ms ease, transform 24000ms linear;
}
.csslider1 > ul > li.num0 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, 11.53846%);
transform: scale(1.3) translate(-11.53846%, 11.53846%);
}
.csslider1 > ul > li.num1 {
opacity: 0;
-webkit-transform: scale(1.3) translate(11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(11.53846%, 11.53846%);
transform: scale(1.3) translate(11.53846%, 11.53846%);
}
.csslider1 > ul > li.num2 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, -11.53846%);
transform: scale(1.3) translate(-11.53846%, -11.53846%);
}
.csslider1 > ul > li.num0 {
opacity: 1;
z-index: 2;
}
.csslider1 > .slide:checked ~ ul > li.num0 {
opacity: 0;
z-index: 1;
}
.csslider1 > #cs_slide1_0:checked ~ ul > li.num0,.csslider1 > #cs_slide1_1:checked ~ ul > li.num1,.csslider1 > #cs_slide1_2:checked ~ ul > li.num2 {
opacity: 1;
-webkit-transform: scale(1) translate(0, 0);
-moz-transform: scale(1) translate(0, 0);
-ms-transform: scale(1) translate(0, 0);
-o-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
z-index: 2;
}
/* calculate autoplay */
@-webkit-keyframes kenbernsBR {
0%, 100% { -webkit-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -webkit-transform: scale(1.3) translate(11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-moz-keyframes kenbernsBR {
0%, 100% { -moz-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -moz-transform: scale(1.3) translate(11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-ms-keyframes kenbernsBR {
0%, 100% { -ms-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -ms-transform: scale(1.3) translate(11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-o-keyframes kenbernsBR {
0%, 100% { -o-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -o-transform: scale(1.3) translate(11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@keyframes kenbernsBR {
0%, 100% { transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-webkit-keyframes kenbernsBL {
0%, 100% { -webkit-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -webkit-transform: scale(1.3) translate(11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-moz-keyframes kenbernsBL {
0%, 100% { -moz-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -moz-transform: scale(1.3) translate(11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-ms-keyframes kenbernsBL {
0%, 100% { -ms-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -ms-transform: scale(1.3) translate(11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-o-keyframes kenbernsBL {
0%, 100% { -o-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -o-transform: scale(1.3) translate(11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@keyframes kenbernsBL {
0%, 100% { transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-webkit-keyframes kenbernsTL {
0%, 100% { -webkit-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -webkit-transform: scale(1.3) translate(-11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-moz-keyframes kenbernsTL {
0%, 100% { -moz-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -moz-transform: scale(1.3) translate(-11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-ms-keyframes kenbernsTL {
0%, 100% { -ms-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -ms-transform: scale(1.3) translate(-11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-o-keyframes kenbernsTL {
0%, 100% { -o-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -o-transform: scale(1.3) translate(-11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@keyframes kenbernsTL {
0%, 100% { transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(-11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-webkit-keyframes kenbernsTR {
0%, 100% { -webkit-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -webkit-transform: scale(1.3) translate(-11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-moz-keyframes kenbernsTR {
0%, 100% { -moz-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -moz-transform: scale(1.3) translate(-11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-ms-keyframes kenbernsTR {
0%, 100% { -ms-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -ms-transform: scale(1.3) translate(-11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-o-keyframes kenbernsTR {
0%, 100% { -o-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -o-transform: scale(1.3) translate(-11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@keyframes kenbernsTR {
0%, 100% { transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(-11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
.csslider1 > #cs_play1:checked ~ ul > li.num0,
.csslider1 > #cs_pause1:checked ~ ul > li.num0 {
-webkit-animation: kenbernsTR 24000ms infinite -2000ms linear;
-moz-animation: kenbernsTR 24000ms infinite -2000ms linear;
-ms-animation: kenbernsTR 24000ms infinite -2000ms linear;
-o-animation: kenbernsTR 24000ms infinite -2000ms linear;
animation: kenbernsTR 24000ms infinite -2000ms linear;
}
.csslider1 > #cs_play1:checked ~ ul > li.num1,
.csslider1 > #cs_pause1:checked ~ ul > li.num1 {
-webkit-animation: kenbernsBR 24000ms infinite 6000ms linear;
-moz-animation: kenbernsBR 24000ms infinite 6000ms linear;
-ms-animation: kenbernsBR 24000ms infinite 6000ms linear;
-o-animation: kenbernsBR 24000ms infinite 6000ms linear;
animation: kenbernsBR 24000ms infinite 6000ms linear;
}
.csslider1 > #cs_play1:checked ~ ul > li.num2,
.csslider1 > #cs_pause1:checked ~ ul > li.num2 {
-webkit-animation: kenbernsTL 24000ms infinite 14000ms linear;
-moz-animation: kenbernsTL 24000ms infinite 14000ms linear;
-ms-animation: kenbernsTL 24000ms infinite 14000ms linear;
-o-animation: kenbernsTL 24000ms infinite 14000ms linear;
animation: kenbernsTL 24000ms infinite 14000ms linear;
}
.csslider1 > #cs_play1:checked ~ ul > li,
.csslider1 > #cs_pause1:checked ~ ul > li {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.csslider1.cs_pauseHover:hover > ul > li,
.csslider1 > #cs_pause1:checked ~ ul > li{
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.csslider1 > .slide:checked ~ ul > li {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
/* /calculate autoplay */
.csslider1 {
-webkit-perspective: 500px;
-moz-perspective: 500px;
-ms-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
}
.csslider1 > .cs_play_pause {
-webkit-transition: .5s opacity 0s ease;
-moz-transition: .5s opacity 0s ease;
-ms-transition: .5s opacity 0s ease;
-o-transition: .5s opacity 0s ease;
transition: .5s opacity 0s ease;
}
.csslider1 > .cs_arrowprev {
-webkit-transition: .5s opacity .15s ease, .5s -webkit-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: .5s opacity .15s ease, .5s -moz-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: .5s opacity .15s ease, .5s -ms-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: .5s opacity .15s ease, .5s -o-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: .5s opacity .15s ease, .5s transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.csslider1 > .cs_arrownext {
-webkit-transition: .5s opacity .3s ease, .5s -webkit-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: .5s opacity .3s ease, .5s -moz-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: .5s opacity .3s ease, .5s -ms-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: .5s opacity .3s ease, .5s -o-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: .5s opacity .3s ease, .5s transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.csslider1 > .cs_arrowprev,
.csslider1 > .cs_arrownext,
.csslider1 > .cs_play_pause {
opacity: 0;
}
.csslider1:hover > .cs_arrowprev,
.csslider1:hover > .cs_arrownext,
.csslider1:hover > .cs_play_pause {
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}.csslider1 > .cs_arrowprev > label,
.csslider1 > .cs_arrownext > label {
overflow: hidden;
margin-top: -35px;
width: 40px;
height: 70px;
/* Fallback for web browsers that doesn’t support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.csslider1 > .cs_arrowprev {
left: 70px;
}
.csslider1 > .cs_arrownext {
right: 70px;
}
.csslider1 > .cs_arrowprev > label {
right: 0;
}
.csslider1 > .cs_arrownext > label {
left: 0;
}
.csslider1 > .cs_arrowprev > label:after {
content: ‘\e800’;
}
.csslider1 > .cs_arrownext > label:after {
content: ‘\e801’;
}
.csslider1 > .cs_arrowprev > label:after,
.csslider1 > .cs_arrownext > label:after {
display: block;
font: 40px “demurecontrols”;
text-align: center;
line-height: 76px;
color: #fff;
}
.csslider1 > .cs_arrowprev > label,
.csslider1 > .cs_arrownext > label {
-webkit-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease;
-moz-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease;
-ms-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease;
-o-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease;
transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease;
}
.csslider1 > .cs_arrowprev:hover > label {
background-color: #E34B64;
width: 70px;
}
.csslider1 > .cs_arrownext:hover > label {
background-color: #E34B64;
width: 70px;
}.csslider1 > .cs_bullets {
bottom: 5px;
margin-bottom: 5px;
}
.csslider1 > .cs_bullets > label {
-webkit-perspective: 500px;
-moz-perspective: 500px;
-ms-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
}
.csslider1 > .cs_bullets > label > .cs_thumb {
border: 3px solid #E34B64;
margin-top: -11px;
-webkit-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -moz-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
-ms-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -ms-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -o-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transform-origin: 0% 100% 0px;
-moz-transform-origin: 0% 100% 0px;
-ms-transform-origin: 0% 100% 0px;
-o-transform-origin: 0% 100% 0px;
transform-origin: 0% 100% 0px;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.csslider1 > .cs_bullets > label > .cs_thumb:before {
content: ”;
position: absolute;
width: 0;
height: 0;
left: 50%;
margin-left: -1px;
bottom: -8px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #E34B64;
}
.csslider1 > .cs_bullets > label:hover > .cs_thumb {
visibility: visible;
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.csslider1 > .cs_bullets > label {
margin: 0 6px;
padding: 9px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
/* Fallback for web browsers that doesn’t support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider1 > .cs_bullets > label.num0 {
background-color: #E34B64;
}
.csslider1 > .slide:checked ~ .cs_bullets > label {
/* Fallback for web browsers that doesn’t support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider1 > #cs_slide1_0:checked ~ .cs_bullets > label.num0,
.csslider1 > #cs_slide1_1:checked ~ .cs_bullets > label.num1,
.csslider1 > #cs_slide1_2:checked ~ .cs_bullets > label.num2 {
background-color: #E34B64;
}
.csslider1 > .cs_bullets > label:hover {
background-color: #E34B64;
}
/* calculate autoplay */
@-webkit-keyframes bullet {
0%, 33.32333333333334% { background-color: #E34B64; }
33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); }
}
@-moz-keyframes bullet {
0%, 33.32333333333334% { background-color: #E34B64; }
33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); }
}
@-ms-keyframes bullet {
0%, 33.32333333333334% { background-color: #E34B64; }
33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); }
}
@-o-keyframes bullet {
0%, 33.32333333333334% { background-color: #E34B64; }
33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); }
}
@keyframes bullet {
0%, 33.32333333333334% { background-color: #E34B64; }
33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); }
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num0 {
-webkit-animation: bullet 24000ms infinite -2000ms;
-moz-animation: bullet 24000ms infinite -2000ms;
-ms-animation: bullet 24000ms infinite -2000ms;
-o-animation: bullet 24000ms infinite -2000ms;
animation: bullet 24000ms infinite -2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num1 {
-webkit-animation: bullet 24000ms infinite 6000ms;
-moz-animation: bullet 24000ms infinite 6000ms;
-ms-animation: bullet 24000ms infinite 6000ms;
-o-animation: bullet 24000ms infinite 6000ms;
animation: bullet 24000ms infinite 6000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num2 {
-webkit-animation: bullet 24000ms infinite 14000ms;
-moz-animation: bullet 24000ms infinite 14000ms;
-ms-animation: bullet 24000ms infinite 14000ms;
-o-animation: bullet 24000ms infinite 14000ms;
animation: bullet 24000ms infinite 14000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.csslider1.cs_pauseHover:hover > .cs_bullets > label,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.csslider1 > .slide:checked ~ .cs_bullets > label {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
/* /calculate autoplay */
.csslider1 > .cs_description > label {
font: 20px ‘Roboto’, sans-serif;
line-height: normal;
bottom: 35px;
left: 20px;
top: auto;
opacity: 1;
z-index: 1;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-ms-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
}
.csslider1 > .cs_description > label > span {
margin: 1px 10px;
padding: 10px;
color: #fff;
overflow: hidden;
-webkit-transform-origin: 0% 0% 0px;
-moz-transform-origin: 0% 0% 0px;
-ms-transform-origin: 0% 0% 0px;
-o-transform-origin: 0% 0% 0px;
transform-origin: 0% 0% 0px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 {
z-index: 2;
}
.csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 > .cs_descr,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_descr,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_descr {
opacity: 1;
visibility: visible;
-webkit-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 > .cs_title,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_title,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_title {
opacity: 1;
visibility: visible;
-webkit-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease;
-moz-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease;
-ms-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease;
-o-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease;
transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 .cs_wrapper,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 .cs_wrapper,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 .cs_wrapper {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.csslider1 > .cs_description > label > .cs_title {
margin: 0px 10px;
opacity: 0;
visibility: hidden;
z-index: 2;
/* Fallback for web browsers that doesn’t support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease;
-moz-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease;
-ms-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease;
-o-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease;
transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease;
}
.csslider1 > .cs_description > label > .cs_descr {
font-size: 0.8em;
margin: 1px 10px;
opacity: 0;
visibility: hidden;
z-index: 1;
background-color: #E34B64;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.csslider1 > .cs_description > label > .cs_title > .cs_wrapper {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.csslider1 > .cs_description > label > .cs_descr > .cs_wrapper {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
/* calculate autoplay */
@-webkit-keyframes cs_descrWrapper {
1.53125%, 35.520833333333336% { z-index: 2; }
35.530833333333334%, 100% { z-index: 0; }
}
@-moz-keyframes cs_descrWrapper {
1.53125%, 35.520833333333336% { z-index: 2; }
35.530833333333334%, 100% { z-index: 0; }
}
@-ms-keyframes cs_descrWrapper {
1.53125%, 35.520833333333336% { z-index: 2; }
35.530833333333334%, 100% { z-index: 0; }
}
@-o-keyframes cs_descrWrapper {
1.53125%, 35.520833333333336% { z-index: 2; }
35.530833333333334%, 100% { z-index: 0; }
}
@keyframes cs_descrWrapper {
1.53125%, 35.520833333333336% { z-index: 2; }
35.530833333333334%, 100% { z-index: 0; }
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num0 {
-webkit-animation: cs_descrWrapper 24000ms infinite -1400ms ease;
-moz-animation: cs_descrWrapper 24000ms infinite -1400ms ease;
-ms-animation: cs_descrWrapper 24000ms infinite -1400ms ease;
-o-animation: cs_descrWrapper 24000ms infinite -1400ms ease;
animation: cs_descrWrapper 24000ms infinite -1400ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 {
-webkit-animation: cs_descrWrapper 24000ms infinite 6600ms ease;
-moz-animation: cs_descrWrapper 24000ms infinite 6600ms ease;
-ms-animation: cs_descrWrapper 24000ms infinite 6600ms ease;
-o-animation: cs_descrWrapper 24000ms infinite 6600ms ease;
animation: cs_descrWrapper 24000ms infinite 6600ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 {
-webkit-animation: cs_descrWrapper 24000ms infinite 14600ms ease;
-moz-animation: cs_descrWrapper 24000ms infinite 14600ms ease;
-ms-animation: cs_descrWrapper 24000ms infinite 14600ms ease;
-o-animation: cs_descrWrapper 24000ms infinite 14600ms ease;
animation: cs_descrWrapper 24000ms infinite 14600ms ease;
}
@-webkit-keyframes cs_title {
1.53125%, 31.792083333333334% { opacity: 1; -webkit-transform: rotateX(-9deg); z-index: 2; visibility: visible;}
2.1875%, 31.135833333333334% { opacity: 1; -webkit-transform: rotateX(0deg); z-index: 2; visibility: visible;}
33.333333333333336% { opacity: 0; -webkit-transform: rotateX(90deg); z-index: 2; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-moz-keyframes cs_title {
1.53125%, 31.792083333333334% { opacity: 1; -moz-transform: rotateX(-9deg); z-index: 2; visibility: visible;}
2.1875%, 31.135833333333334% { opacity: 1; -moz-transform: rotateX(0deg); z-index: 2; visibility: visible;}
33.333333333333336% { opacity: 0; -moz-transform: rotateX(90deg); z-index: 2; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-ms-keyframes cs_title {
1.53125%, 31.792083333333334% { opacity: 1; -ms-transform: rotateX(-9deg); z-index: 2; visibility: visible;}
2.1875%, 31.135833333333334% { opacity: 1; -ms-transform: rotateX(0deg); z-index: 2; visibility: visible;}
33.333333333333336% { opacity: 0; -ms-transform: rotateX(90deg); z-index: 2; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-o-keyframes cs_title {
1.53125%, 31.792083333333334% { opacity: 1; -o-transform: rotateX(-9deg); z-index: 2; visibility: visible;}
2.1875%, 31.135833333333334% { opacity: 1; -o-transform: rotateX(0deg); z-index: 2; visibility: visible;}
33.333333333333336% { opacity: 0; -o-transform: rotateX(90deg); z-index: 2; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@keyframes cs_title {
1.53125%, 31.792083333333334% { opacity: 1; transform: rotateX(-9deg); z-index: 2; visibility: visible;}
2.1875%, 31.135833333333334% { opacity: 1; transform: rotateX(0deg); z-index: 2; visibility: visible;}
33.333333333333336% { opacity: 0; transform: rotateX(90deg); z-index: 2; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-webkit-keyframes cs_descr {
3.0625%, 29.604583333333334% { opacity: 1; -webkit-transform: rotateX(9deg); z-index: 1; visibility: visible;}
4.375%, 28.948333333333334% { opacity: 1; -webkit-transform: rotateX(0deg); z-index: 1; visibility: visible;}
33.333333333333336% { opacity: 0; -webkit-transform: rotateX(-90deg); z-index: 1; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-moz-keyframes cs_descr {
3.0625%, 29.604583333333334% { opacity: 1; -moz-transform: rotateX(9deg); z-index: 1; visibility: visible;}
4.375%, 28.948333333333334% { opacity: 1; -moz-transform: rotateX(0deg); z-index: 1; visibility: visible;}
33.333333333333336% { opacity: 0; -moz-transform: rotateX(-90deg); z-index: 1; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-ms-keyframes cs_descr {
3.0625%, 29.604583333333334% { opacity: 1; -ms-transform: rotateX(9deg); z-index: 1; visibility: visible;}
4.375%, 28.948333333333334% { opacity: 1; -ms-transform: rotateX(0deg); z-index: 1; visibility: visible;}
33.333333333333336% { opacity: 0; -ms-transform: rotateX(-90deg); z-index: 1; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-o-keyframes cs_descr {
3.0625%, 29.604583333333334% { opacity: 1; -o-transform: rotateX(9deg); z-index: 1; visibility: visible;}
4.375%, 28.948333333333334% { opacity: 1; -o-transform: rotateX(0deg); z-index: 1; visibility: visible;}
33.333333333333336% { opacity: 0; -o-transform: rotateX(-90deg); z-index: 1; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@keyframes cs_descr {
3.0625%, 29.604583333333334% { opacity: 1; transform: rotateX(9deg); z-index: 1; visibility: visible;}
4.375%, 28.948333333333334% { opacity: 1; transform: rotateX(0deg); z-index: 1; visibility: visible;}
33.333333333333336% { opacity: 0; transform: rotateX(-90deg); z-index: 1; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num0 > .cs_title,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num0 > .cs_title {
-webkit-animation: cs_title 24000ms infinite -1400ms ease;
-moz-animation: cs_title 24000ms infinite -1400ms ease;
-ms-animation: cs_title 24000ms infinite -1400ms ease;
-o-animation: cs_title 24000ms infinite -1400ms ease;
animation: cs_title 24000ms infinite -1400ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 > .cs_title,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num1 > .cs_title {
-webkit-animation: cs_title 24000ms infinite 6600ms ease;
-moz-animation: cs_title 24000ms infinite 6600ms ease;
-ms-animation: cs_title 24000ms infinite 6600ms ease;
-o-animation: cs_title 24000ms infinite 6600ms ease;
animation: cs_title 24000ms infinite 6600ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 > .cs_title,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num2 > .cs_title {
-webkit-animation: cs_title 24000ms infinite 14600ms ease;
-moz-animation: cs_title 24000ms infinite 14600ms ease;
-ms-animation: cs_title 24000ms infinite 14600ms ease;
-o-animation: cs_title 24000ms infinite 14600ms ease;
animation: cs_title 24000ms infinite 14600ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num0 > .cs_descr,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num0 > .cs_descr {
-webkit-animation: cs_descr 24000ms infinite -1400ms ease;
-moz-animation: cs_descr 24000ms infinite -1400ms ease;
-ms-animation: cs_descr 24000ms infinite -1400ms ease;
-o-animation: cs_descr 24000ms infinite -1400ms ease;
animation: cs_descr 24000ms infinite -1400ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 > .cs_descr,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num1 > .cs_descr {
-webkit-animation: cs_descr 24000ms infinite 6600ms ease;
-moz-animation: cs_descr 24000ms infinite 6600ms ease;
-ms-animation: cs_descr 24000ms infinite 6600ms ease;
-o-animation: cs_descr 24000ms infinite 6600ms ease;
animation: cs_descr 24000ms infinite 6600ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 > .cs_descr,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num2 > .cs_descr {
-webkit-animation: cs_descr 24000ms infinite 14600ms ease;
-moz-animation: cs_descr 24000ms infinite 14600ms ease;
-ms-animation: cs_descr 24000ms infinite 14600ms ease;
-o-animation: cs_descr 24000ms infinite 14600ms ease;
animation: cs_descr 24000ms infinite 14600ms ease;
}
@-webkit-keyframes cs_title_text {
1.53125%, 31.792083333333334% { opacity: 1; -webkit-transform: translateX(-1%); }
2.1875%, 31.135833333333334% { opacity: 1; -webkit-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -webkit-transform: translateX(100%); }
}
@-moz-keyframes cs_title_text {
1.53125%, 31.792083333333334% { opacity: 1; -moz-transform: translateX(-1%); }
2.1875%, 31.135833333333334% { opacity: 1; -moz-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -moz-transform: translateX(100%); }
}
@-ms-keyframes cs_title_text {
1.53125%, 31.792083333333334% { opacity: 1; -ms-transform: translateX(-1%); }
2.1875%, 31.135833333333334% { opacity: 1; -ms-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -ms-transform: translateX(100%); }
}
@-o-keyframes cs_title_text {
1.53125%, 31.792083333333334% { opacity: 1; -o-transform: translateX(-1%); }
2.1875%, 31.135833333333334% { opacity: 1; -o-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -o-transform: translateX(100%); }
}
@keyframes cs_title_text {
1.53125%, 31.792083333333334% { opacity: 1; transform: translateX(-1%); }
2.1875%, 31.135833333333334% { opacity: 1; transform: translateX(0%); }
33.333333333333336% { opacity: 0; transform: translateX(100%); }
}
@-webkit-keyframes cs_descr_text {
3.0625%, 29.604583333333334% { opacity: 1; -webkit-transform: translateX(1%); }
4.375%, 28.948333333333334% { opacity: 1; -webkit-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -webkit-transform: translateX(-100%); }
}
@-moz-keyframes cs_descr_text {
3.0625%, 29.604583333333334% { opacity: 1; -moz-transform: translateX(1%); }
4.375%, 28.948333333333334% { opacity: 1; -moz-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -moz-transform: translateX(-100%); }
}
@-ms-keyframes cs_descr_text {
3.0625%, 29.604583333333334% { opacity: 1; -ms-transform: translateX(1%); }
4.375%, 28.948333333333334% { opacity: 1; -ms-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -ms-transform: translateX(-100%); }
}
@-o-keyframes cs_descr_text {
3.0625%, 29.604583333333334% { opacity: 1; -o-transform: translateX(1%); }
4.375%, 28.948333333333334% { opacity: 1; -o-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -o-transform: translateX(-100%); }
}
@keyframes cs_descr_text {
3.0625%, 29.604583333333334% { opacity: 1; transform: translateX(1%); }
4.375%, 28.948333333333334% { opacity: 1; transform: translateX(0%); }
33.333333333333336% { opacity: 0; transform: translateX(-100%); }
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper {
-webkit-animation: cs_title_text 24000ms infinite -1190ms ease;
-moz-animation: cs_title_text 24000ms infinite -1190ms ease;
-ms-animation: cs_title_text 24000ms infinite -1190ms ease;
-o-animation: cs_title_text 24000ms infinite -1190ms ease;
animation: cs_title_text 24000ms infinite -1190ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper {
-webkit-animation: cs_title_text 24000ms infinite 6810ms ease;
-moz-animation: cs_title_text 24000ms infinite 6810ms ease;
-ms-animation: cs_title_text 24000ms infinite 6810ms ease;
-o-animation: cs_title_text 24000ms infinite 6810ms ease;
animation: cs_title_text 24000ms infinite 6810ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper {
-webkit-animation: cs_title_text 24000ms infinite 14810ms ease;
-moz-animation: cs_title_text 24000ms infinite 14810ms ease;
-ms-animation: cs_title_text 24000ms infinite 14810ms ease;
-o-animation: cs_title_text 24000ms infinite 14810ms ease;
animation: cs_title_text 24000ms infinite 14810ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper {
-webkit-animation: cs_descr_text 24000ms infinite -1190ms ease;
-moz-animation: cs_descr_text 24000ms infinite -1190ms ease;
-ms-animation: cs_descr_text 24000ms infinite -1190ms ease;
-o-animation: cs_descr_text 24000ms infinite -1190ms ease;
animation: cs_descr_text 24000ms infinite -1190ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper {
-webkit-animation: cs_descr_text 24000ms infinite 6810ms ease;
-moz-animation: cs_descr_text 24000ms infinite 6810ms ease;
-ms-animation: cs_descr_text 24000ms infinite 6810ms ease;
-o-animation: cs_descr_text 24000ms infinite 6810ms ease;
animation: cs_descr_text 24000ms infinite 6810ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper {
-webkit-animation: cs_descr_text 24000ms infinite 14810ms ease;
-moz-animation: cs_descr_text 24000ms infinite 14810ms ease;
-ms-animation: cs_descr_text 24000ms infinite 14810ms ease;
-o-animation: cs_descr_text 24000ms infinite 14810ms ease;
animation: cs_descr_text 24000ms infinite 14810ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_title,
.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_descr,
.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_title > .cs_wrapper,
.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_descr > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_title,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_descr,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_title > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_descr > .cs_wrapper {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.csslider1.cs_pauseHover:hover > .cs_description > label > .cs_title,
.csslider1.cs_pauseHover:hover > .cs_description > label > .cs_descr,
.csslider1.cs_pauseHover:hover > .cs_description > label > .cs_title > .cs_wrapper,
.csslider1.cs_pauseHover:hover > .cs_description > label > .cs_descr > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_title,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_descr,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_title > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_descr > .cs_wrapper {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.csslider1 > .slide:checked ~ .cs_description > label {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
@media
only screen and (max-width: 480px),
only screen and (-webkit-max-device-pixel-ratio: 2) and (max-width: 480px),
only screen and ( max–moz-device-pixel-ratio: 2) and (max-width: 480px),
only screen and ( -o-max-device-pixel-ratio: 2/1) and (max-width: 480px),
only screen and ( max-device-pixel-ratio: 2) and (max-width: 480px),
only screen and ( max-resolution: 192dpi) and (max-width: 480px),
only screen and ( max-resolution: 2dppx) and (max-width: 480px) {
.csslider1 > .cs_description,
.csslider1 > .cs_bullets {
display: none;
}
}
12. CSS slider
HTML
<ul> <!– slides –>
<li><img src=”http://www.script-tutorials.com/demos/284/images/pic1.jpg” alt=”image01″ />
<div>Promo text #1</div>
</li>
<li><img src=”http://www.script-tutorials.com/demos/284/images/pic2.jpg” alt=”image02″ />
<div>Promo text #2</div>
</li>
<li><img src=”http://www.script-tutorials.com/demos/284/images/pic3.jpg” alt=”image03″ />
<div>Promo text #3</div>
</li>
<li><img src=”http://www.script-tutorials.com/demos/284/images/pic4.jpg” alt=”image04″ />
<div>Promo text #4</div>
</li>
</ul>
</div>
CSS
.slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:900px;
}
.slides ul {
list-style:none;
position:relative;
}/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}.slides ul li {
opacity:0;
position:absolute;
top:0;/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
.slides ul li div {
background-color:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;
/* css3 animation */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
13. CSS slider
HTML
<figure><img src=”http://thatweb.co/images/hero/creative-web-design.jpg”>
<img src=”http://thatweb.co/images/hero/creative-web-design.jpg”>
<img src=”http://thatweb.co/images/hero/creative-web-design.jpg”>
<img src=”http://thatweb.co/images/hero/creative-web-design.jpg”>
<img src=”http://thatweb.co/images/hero/creative-web-design.jpg”></figure>
</div>
CSS
{
0%{left:0%;}
20%{left:0%;}
25%{left:-100%;}
45%{left:-100%;}
50%{left:-200%;}
70%{left:-200%;}
75%{left:-300%;}
95%{left:-300%;}
100%{left:-400%;}
}div
{
overflow: hidden;
}figure
{
position:relative;
width:500%;
margin:0px;
left:0px;
text-align:left;
animation: 30s slide infinite;
}img
{
float:left;
width:20%;
height:50%;
}h2
{
text-align:center;
}
14. CSS3 слайдер изображений с авто прокруткой
HTML
<div id=”content-slider”>
<div id=”slider”> <!– Slider container –>
<div id=”mask”> <!– Mask –><ul>
<li id=”first” class=”firstanimation”> <!– ID for tooltip and class for animation –>
<a href=”#”> <img src=”http://www.htmldrive.net/edit_media/2012/201205/20120529/CSS3-Slider/images/img_1.jpg” alt=”Cougar”/> </a>
<div class=”tooltip”> <h1>Cougar</h1> </div>
</li><li id=”second” class=”secondanimation”>
<a href=”#”> <img src=”http://www.htmldrive.net/edit_media/2012/201205/20120529/CSS3-Slider/images/img_2.jpg” alt=”Lions”/> </a>
<div class=”tooltip”> <h1>Lions</h1> </div>
</li><li id=”third” class=”thirdanimation”>
<a href=”#”> <img src=”http://www.htmldrive.net/edit_media/2012/201205/20120529/CSS3-Slider/images/img_3.jpg” alt=”Snowalker”/> </a>
<div class=”tooltip”> <h1>Snowalker</h1> </div>
</li><li id=”fourth” class=”fourthanimation”>
<a href=”#”> <img src=”http://www.htmldrive.net/edit_media/2012/201205/20120529/CSS3-Slider/images/img_4.jpg” alt=”Howling”/> </a>
<div class=”tooltip”> <h1>Howling</h1> </div>
</li><li id=”fifth” class=”fifthanimation”>
<a href=”#”> <img src=”http://www.htmldrive.net/edit_media/2012/201205/20120529/CSS3-Slider/images/img_5.jpg” alt=”Sunbathing”/> </a>
<div class=”tooltip”> <h1>Sunbathing</h1> </div>
</li>
</ul></div> <!– End Mask –>
<div class=”progress-bar”></div> <!– Progress Bar –>
</div> <!– End Slider Container –>
</div>
</div>
CSS
.container {
margin:0 auto;
overflow:hidden;
width:960px;
}/* CONTENT SLIDER */
#content-slider {
width:100%;
height:360px;
margin:10px auto 0;
}
/* SLIDER */
#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:320px;
width:680px;
margin:40px auto 0;
overflow:visible;
position:relative;
}
#mask {
overflow:hidden;
height:320px;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:680px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;
}#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-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; }}
@-moz-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index: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; }
50% { 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; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
/* ANIMATION BAR */
@-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; }
}
15. Pure css slider using Blend Mode
HTML
<img class=’photo’ src=”http://lorempixel.com/640/480/transport/1″ />
<img class=’photo’ src=”http://lorempixel.com/640/480/transport/2″ />
<img class=’photo’ src=”http://lorempixel.com/640/480/transport/3″ />
<img class=’photo’ src=”http://lorempixel.com/640/480/transport/4″ />
</div>
CSS
margin:50px auto;
width:400px;
height:300px;
overflow:hidden;
position:relative;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/masque-24.png);
background-size: cover;
}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;
mix-blend-mode: screen;
width: 100%;
}
@keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
Хорошая инфа. Если возможно было бы отлично с прмерами
Дык под каждым кодом есть ссылка “Пример”