Star Wars Split Slider - Pure CSS
HTML
<body class="body_controller">
<div class="main_controller">
<div class="fixed_gallery_controller">
<div class="double_images_holder_3">
<div class="image_3_side_1"></div>
<div class="image_3_side_2"></div>
</div>
<div class="double_images_holder_1">
<div class="image_1_side_1"></div>
<div class="image_1_side_2"></div>
</div>
<div class="double_images_holder_2">
<div class="image_2_side_1"></div>
<div class="image_2_side_2"></div>
</div>
</div>
</div>
</body>
CSS
@keyframes Slide_side_1 {
0% { transform: translateX(0px); }
20% { transform: translateX(0px); }
25% { transform: translateX(-105%); }
90% { transform: translateX(-105%); }
95% { transform: translateX(0%); }
100% { transform: translateX(0%); }
}
@keyframes Slide_side_2 {
0% { transform: translateX(0px); }
20% { transform: translateX(0px); }
25% { transform: translateX(100%); }
90% { transform: translateX(100%); }
95% { transform: translateX(0%); }
100% { transform: translateX(0%); }
}
@keyframes Slide_2_side_1 {
0% { transform: translateX(0px); }
20% { transform: translateX(0px); }
25% { transform: translateX(0%); }
45% { transform: translateX(0%); }
50% { transform: translateX(-105%); }
85% { transform: translateX(-105%); }
90% { transform: translateX(0%); }
100% { transform: translateX(0%); }
}
@keyframes Slide_2_side_2 {
0% { transform: translateX(0px); }
20% { transform: translateX(0px); }
25% { transform: translateX(0%); }
45% { transform: translateX(0%); }
50% { transform: translateX(100%); }
85% { transform: translateX(100%); }
90% { transform: translateX(0%); }
100% { transform: translateX(0%); }
}
@keyframes Slide_3_side_1 {
0% { transform: translateX(0px); }
20% { transform: translateX(0px); }
50% { transform: translateX(0%); }
70% { transform: translateX(0%); }
75% { transform: translateX(-105%); }
100% { transform: translateX(-105%); }
}
@keyframes Slide_3_side_2 {
0% { transform: translateX(0px); }
20% { transform: translateX(0px); }
50% { transform: translateX(0%); }
70% { transform: translateX(0%); }
75% { transform: translateX(-105%); }
100% { transform: translateX(100%); }
}
.body_controller {
width: 100%;
height: 500px;
text-align: center;
background: #2c2c2c;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
transition: all 400ms ease;
}
.main_controller {
width: 90%;
height: 400px;
margin-top: 150px;
margin-bottom: 0px;
display: inline-table;
background: #ffffff;
overflow: hidden;
box-shadow: 0px 50px 50px 2px rgba(000, 000, 000, 0.5);
transition: all 400ms ease;
}
.fixed_gallery_controller {
width: 100%;
overflow: hidden;
margin-bottom: 0px;
height: inherit;
transition: all 400ms ease;
}
.double_images_holder_1 {
width: 90.1%;
height: inherit;
overflow: hidden;
position: absolute;
transition: all 400ms ease;
}
.image_1_side_1 {
width: 50%;
text-align: left;
height: 400px;
background: url(http://wallpapercave.com/wp/6mYMKGh.jpg);
background-position: left;
background-repeat: no-repeat;
background-size: 200%;
display: inline-table;
float: left;
animation: 30s Slide_2_side_1 infinite;
transition: all 400ms ease;
}
.image_1_side_2 {
width: 50%;
height: 400px;
margin-right: 0px;
text-align: right;
background: url(http://wallpapercave.com/wp/6mYMKGh.jpg);
background-position: right;
background-repeat: no-repeat;
background-size: 200%;
display: inline-table;
float: left;
animation: 30s Slide_2_side_2 infinite;
transition: all 400ms ease;
}
.double_images_holder_2 {
width: 90.1%;
height: inherit;
overflow: hidden;
position: absolute;
transition: all 400ms ease;
}
.image_2_side_1 {
width: 50%;
text-align: left;
height: 400px;
background: url(http://www.wallpapermade.com/images/wallpapers/originals/star-wars-battlefront-darth-vader-wallpaper-5492.jpg);
background-position: left;
background-repeat: no-repeat;
background-size: 200%;
display: inline-table;
float: left;
animation: 30s Slide_side_1 infinite;
transition: all 400ms ease;
}
.image_2_side_2 {
width: 50%;
height: 400px;
margin-right: 0px;
text-align: right;
background: url(http://www.wallpapermade.com/images/wallpapers/originals/star-wars-battlefront-darth-vader-wallpaper-5492.jpg);
background-position: right;
background-repeat: no-repeat;
background-size: 200%;
display: inline-table;
float: left;
animation: 30s Slide_side_2 infinite;
transition: all 400ms ease;
}
.double_images_holder_3 {
width: 90.1%;
height: inherit;
overflow: hidden;
position: absolute;
transition: all 400ms ease;
}
.image_3_side_1 {
width: 50%;
text-align: left;
height: 400px;
background: url(https://images8.alphacoders.com/407/407468.jpg);
background-position: left;
background-repeat: no-repeat;
background-size: 200%;
display: inline-table;
float: left;
animation: 30s Slide_side_3 infinite;
transition: all 400ms ease;
}
.image_3_side_2 {
width: 50%;
height: 400px;
margin-right: 0px;
text-align: right;
background: url(https://images8.alphacoders.com/407/407468.jpg);
background-position: right;
background-repeat: no-repeat;
background-size: 200%;
display: inline-table;
float: left;
animation: 30s Slide_side_3 infinite;
transition: all 400ms ease;
}
