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; }
JAVASCRIPT
Expand for more options Login