This pure CSS code snippet helps you to create an image slideshow with transition effects. It uses animations to transition images horizontally. Each image moves into view from the side, creating a slideshow effect. The code helps showcase multiple images in a single space with smooth transitions.
You can use this code on websites to showcase image galleries or slideshows. It’s great for displaying multiple images within a limited space, adding visual appeal to your site.
How to Create Pure CSS Image Slideshow with Transition Effects
1. Start by setting up the HTML structure. Use <div> elements with unique classes to hold your images. The code provides sample classes like bar, bar1, bar2, and so on, each representing an image container.
<div class="container">
<div class="bar"></div>
<div class="bar1"></div>
<div class="bar"></div>
<div class="bar1"></div>
<div class="bar"></div>
<div class="bar1"></div>
<div class="bar"></div>
<div class="bar1"></div>
<div class="bar"></div>
<div class="bar1"></div>
<div class="bar"></div>
<div class="bar1"></div>
<div class="bar"></div>
<div class="bar1"></div>
<div class="bar"></div>
<div class="bar1"></div>
<div class="bar"></div>
<div class="bar1"></div>
<div class="bar"></div>
<div class="bar1"></div>
</div>
<div class="container">
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="container">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar4"></div>
<div class="bar5"></div>
</div>
<div class="container">
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar6"></div>
<div class="bar7"></div>
</div>
<div class="container">
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar8"></div>
<div class="bar9"></div>
</div>
<div class="container">
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar10"></div>
<div class="bar11"></div>
</div>
<div class="container">
<div class="bar12"></div>
<div class="bar13"></div>
<div class="bar12"></div>
<div class="bar13"></div>
<div class="bar12"></div>
<div class="bar13"></div>
<div class="bar12"></div>
<div class="bar13"></div>
<div class="bar12"></div>
<div class="bar13"></div>
<div class="bar12"></div>
<div class="bar13"></div>
<div class="bar12"></div>
<div class="bar13"></div>
<div class="bar12"></div>
<div class="bar13"></div>
<div class="bar12"></div>
<div class="bar13"></div>
<div class="bar12"></div>
<div class="bar13"></div>
</div>
2. Style the containers (<div class="container">) using CSS. Set the size, position, border, and any additional styles for the slideshow frame. Define the individual image containers (bar, bar1, etc.). Adjust the size, background, and animation properties. Each image container has its animation to control the transition effect.
Define the animation behavior for each image container (@keyframes). These control how the images move and transition within the slideshow.
html{
min-height: 720px;
width: 100%;
background: #151515;
position: relative;
}
.container {
position: absolute;
left: 50%;
top: 50%;
margin-top: -310px;
margin-left: -300px;
z-index: 2;
width: 600px;
height: 600px;
background: transparent;
overflow: hidden;
border: 10px solid black;
}
.container:nth-child(1) {
z-index: 3;
}
.container:nth-child(2) {
z-index: 4;
}
.container:nth-child(3) {
z-index: 5;
}
.container:nth-child(4) {
z-index: 6;
}
.container:nth-child(5) {
z-index: 7;
}
.container:nth-child(6) {
z-index: 8;
}
.container:nth-child(7) {
z-index: 9;
}
.bar {
width: 600px;
height: 30px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/405_1.jpg");
}
.bar:nth-child(1) {
animation: s1 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% 0px;
left: -600px;
overflow: hidden;
}
@keyframes s1 {
0% {
left: -600px;
top: 0px;
}
100% {
left: 0px;
top: 0px;
}
}
.bar:nth-child(2) {
animation: s2 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -30px;
left: -600px;
overflow: hidden;
}
@keyframes s2 {
0% {
left: -600px;
top: 30px;
}
100% {
left: 0px;
top: 30px;
}
}
.bar:nth-child(3) {
animation: s3 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -60px;
left: -600px;
overflow: hidden;
}
@keyframes s3 {
0% {
left: -600px;
top: 60px;
}
100% {
left: 0px;
top: 60px;
}
}
.bar:nth-child(4) {
animation: s4 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -90px;
left: -600px;
overflow: hidden;
}
@keyframes s4 {
0% {
left: -600px;
top: 90px;
}
100% {
left: 0px;
top: 90px;
}
}
.bar:nth-child(5) {
animation: s5 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -120px;
left: -600px;
overflow: hidden;
}
@keyframes s5 {
0% {
left: -600px;
top: 120px;
}
100% {
left: 0px;
top: 120px;
}
}
.bar:nth-child(6) {
animation: s6 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -150px;
left: -600px;
overflow: hidden;
}
@keyframes s6 {
0% {
left: -600px;
top: 150px;
}
100% {
left: 0px;
top: 150px;
}
}
.bar:nth-child(7) {
animation: s7 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -180px;
left: -600px;
overflow: hidden;
}
@keyframes s7 {
0% {
left: -600px;
top: 180px;
}
100% {
left: 0px;
top: 180px;
}
}
.bar:nth-child(8) {
animation: s8 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -210px;
left: -600px;
overflow: hidden;
}
@keyframes s8 {
0% {
left: -600px;
top: 210px;
}
100% {
left: 0px;
top: 210px;
}
}
.bar:nth-child(9) {
animation: s9 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -240px;
left: -600px;
overflow: hidden;
}
@keyframes s9 {
0% {
left: -600px;
top: 240px;
}
100% {
left: 0px;
top: 240px;
}
}
.bar:nth-child(10) {
animation: s10 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -270px;
left: -600px;
overflow: hidden;
}
@keyframes s10 {
0% {
left: -600px;
top: 270px;
}
100% {
left: 0px;
top: 270px;
}
}
.bar:nth-child(11) {
animation: s11 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -300px;
left: -600px;
overflow: hidden;
}
@keyframes s11 {
0% {
left: -600px;
top: 300px;
}
100% {
left: 0px;
top: 300px;
}
}
.bar:nth-child(12) {
animation: s12 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -330px;
left: -600px;
overflow: hidden;
}
@keyframes s12 {
0% {
left: -600px;
top: 330px;
}
100% {
left: 0px;
top: 330px;
}
}
.bar:nth-child(13) {
animation: s13 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -360px;
left: -600px;
overflow: hidden;
}
@keyframes s13 {
0% {
left: -600px;
top: 360px;
}
100% {
left: 0px;
top: 360px;
}
}
.bar:nth-child(14) {
animation: s14 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -390px;
left: -600px;
overflow: hidden;
}
@keyframes s14 {
0% {
left: -600px;
top: 390px;
}
100% {
left: 0px;
top: 390px;
}
}
.bar:nth-child(15) {
animation: s15 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -420px;
left: -600px;
overflow: hidden;
}
@keyframes s15 {
0% {
left: -600px;
top: 420px;
}
100% {
left: 0px;
top: 420px;
}
}
.bar:nth-child(16) {
animation: s16 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -450px;
left: -600px;
overflow: hidden;
}
@keyframes s16 {
0% {
left: -600px;
top: 450px;
}
100% {
left: 0px;
top: 450px;
}
}
.bar:nth-child(17) {
animation: s17 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -480px;
left: -600px;
overflow: hidden;
}
@keyframes s17 {
0% {
left: -600px;
top: 480px;
}
100% {
left: 0px;
top: 480px;
}
}
.bar:nth-child(18) {
animation: s18 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -510px;
left: -600px;
overflow: hidden;
}
@keyframes s18 {
0% {
left: -600px;
top: 510px;
}
100% {
left: 0px;
top: 510px;
}
}
.bar:nth-child(19) {
animation: s19 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -540px;
left: -600px;
overflow: hidden;
}
@keyframes s19 {
0% {
left: -600px;
top: 540px;
}
100% {
left: 0px;
top: 540px;
}
}
.bar:nth-child(20) {
animation: s20 1.5s linear forwards 1s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -570px;
left: -600px;
overflow: hidden;
}
@keyframes s20 {
0% {
left: -600px;
top: 570px;
}
100% {
left: 0px;
top: 570px;
}
}
.bar1 {
width: 600px;
height: 30px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/405_1.jpg");
}
.bar1:nth-child(1) {
animation: t1 1.5s linear forwards 1s;
background-position: 0% 0px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t1 {
0% {
left: 600px;
top: 0px;
}
100% {
left: 0px;
top: 0px;
}
}
.bar1:nth-child(2) {
animation: t2 1.5s linear forwards 1s;
background-position: 0% -30px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t2 {
0% {
left: 600px;
top: 30px;
}
100% {
left: 0px;
top: 30px;
}
}
.bar1:nth-child(3) {
animation: t3 1.5s linear forwards 1s;
background-position: 0% -60px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t3 {
0% {
left: 600px;
top: 60px;
}
100% {
left: 0px;
top: 60px;
}
}
.bar1:nth-child(4) {
animation: t4 1.5s linear forwards 1s;
background-position: 0% -90px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t4 {
0% {
left: 600px;
top: 90px;
}
100% {
left: 0px;
top: 90px;
}
}
.bar1:nth-child(5) {
animation: t5 1.5s linear forwards 1s;
background-position: 0% -120px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t5 {
0% {
left: 600px;
top: 120px;
}
100% {
left: 0px;
top: 120px;
}
}
.bar1:nth-child(6) {
animation: t6 1.5s linear forwards 1s;
background-position: 0% -150px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t6 {
0% {
left: 600px;
top: 150px;
}
100% {
left: 0px;
top: 150px;
}
}
.bar1:nth-child(7) {
animation: t7 1.5s linear forwards 1s;
background-position: 0% -180px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t7 {
0% {
left: 600px;
top: 180px;
}
100% {
left: 0px;
top: 180px;
}
}
.bar1:nth-child(8) {
animation: t8 1.5s linear forwards 1s;
background-position: 0% -210px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t8 {
0% {
left: 600px;
top: 210px;
}
100% {
left: 0px;
top: 210px;
}
}
.bar1:nth-child(9) {
animation: t9 1.5s linear forwards 1s;
background-position: 0% -240px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t9 {
0% {
left: 600px;
top: 240px;
}
100% {
left: 0px;
top: 240px;
}
}
.bar1:nth-child(10) {
animation: t10 1.5s linear forwards 1s;
background-position: 0% -270px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t10 {
0% {
left: 600px;
top: 270px;
}
100% {
left: 0px;
top: 270px;
}
}
.bar1:nth-child(11) {
animation: t11 1.5s linear forwards 1s;
background-position: 0% -300px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t11 {
0% {
left: 600px;
top: 300px;
}
100% {
left: 0px;
top: 300px;
}
}
.bar1:nth-child(12) {
animation: t12 1.5s linear forwards 1s;
background-position: 0% -330px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t12 {
0% {
left: 600px;
top: 330px;
}
100% {
left: 0px;
top: 330px;
}
}
.bar1:nth-child(13) {
animation: t13 1.5s linear forwards 1s;
background-position: 0% -360px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t13 {
0% {
left: 600px;
top: 360px;
}
100% {
left: 0px;
top: 360px;
}
}
.bar1:nth-child(14) {
animation: t14 1.5s linear forwards 1s;
background-position: 0% -390px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t14 {
0% {
left: 600px;
top: 390px;
}
100% {
left: 0px;
top: 390px;
}
}
.bar1:nth-child(15) {
animation: t15 1.5s linear forwards 1s;
background-position: 0% -420px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t15 {
0% {
left: 600px;
top: 420px;
}
100% {
left: 0px;
top: 420px;
}
}
.bar1:nth-child(16) {
animation: t16 1.5s linear forwards 1s;
background-position: 0% -450px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t16 {
0% {
left: 600px;
top: 450px;
}
100% {
left: 0px;
top: 450px;
}
}
.bar1:nth-child(17) {
animation: t17 1.5s linear forwards 1s;
background-position: 0% -480px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t17 {
0% {
left: 600px;
top: 480px;
}
100% {
left: 0px;
top: 480px;
}
}
.bar1:nth-child(18) {
animation: t18 1.5s linear forwards 1s;
background-position: 0% -510px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t18 {
0% {
left: 600px;
top: 510px;
}
100% {
left: 0px;
top: 510px;
}
}
.bar1:nth-child(19) {
animation: t19 1.5s linear forwards 1s;
background-position: 0% -540px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t19 {
0% {
left: 600px;
top: 540px;
}
100% {
left: 0px;
top: 540px;
}
}
.bar1:nth-child(20) {
animation: t20 1.5s linear forwards 1s;
background-position: 0% -570px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t20 {
0% {
left: 600px;
top: 570px;
}
100% {
left: 0px;
top: 570px;
}
}
.bar2 {
width: 30px;
height: 600px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/406.jpg");
}
.bar2:nth-child(1) {
animation: u1 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: 0px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u1 {
0% {
top: -600px;
left: 0px;
}
100% {
top: 0px;
left: 0px;
}
}
.bar2:nth-child(2) {
animation: u2 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -30px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u2 {
0% {
top: -600px;
left: 30px;
}
100% {
top: 0px;
left: 30px;
}
}
.bar2:nth-child(3) {
animation: u3 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -60px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u3 {
0% {
top: -600px;
left: 60px;
}
100% {
top: 0px;
left: 60px;
}
}
.bar2:nth-child(4) {
animation: u4 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -90px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u4 {
0% {
top: -600px;
left: 90px;
}
100% {
top: 0px;
left: 90px;
}
}
.bar2:nth-child(5) {
animation: u5 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -120px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u5 {
0% {
top: -600px;
left: 120px;
}
100% {
top: 0px;
left: 120px;
}
}
.bar2:nth-child(6) {
animation: u6 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -150px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u6 {
0% {
top: -600px;
left: 150px;
}
100% {
top: 0px;
left: 150px;
}
}
.bar2:nth-child(7) {
animation: u7 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -180px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u7 {
0% {
top: -600px;
left: 180px;
}
100% {
top: 0px;
left: 180px;
}
}
.bar2:nth-child(8) {
animation: u8 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -210px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u8 {
0% {
top: -600px;
left: 210px;
}
100% {
top: 0px;
left: 210px;
}
}
.bar2:nth-child(9) {
animation: u9 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -240px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u9 {
0% {
top: -600px;
left: 240px;
}
100% {
top: 0px;
left: 240px;
}
}
.bar2:nth-child(10) {
animation: u10 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -270px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u10 {
0% {
top: -600px;
left: 270px;
}
100% {
top: 0px;
left: 270px;
}
}
.bar2:nth-child(11) {
animation: u11 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -300px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u11 {
0% {
top: -600px;
left: 300px;
}
100% {
top: 0px;
left: 300px;
}
}
.bar2:nth-child(12) {
animation: u12 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -330px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u12 {
0% {
top: -600px;
left: 330px;
}
100% {
top: 0px;
left: 330px;
}
}
.bar2:nth-child(13) {
animation: u13 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -360px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u13 {
0% {
top: -600px;
left: 360px;
}
100% {
top: 0px;
left: 360px;
}
}
.bar2:nth-child(14) {
animation: u14 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -390px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u14 {
0% {
top: -600px;
left: 390px;
}
100% {
top: 0px;
left: 390px;
}
}
.bar2:nth-child(15) {
animation: u15 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -420px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u15 {
0% {
top: -600px;
left: 420px;
}
100% {
top: 0px;
left: 420px;
}
}
.bar2:nth-child(16) {
animation: u16 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -450px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u16 {
0% {
top: -600px;
left: 450px;
}
100% {
top: 0px;
left: 450px;
}
}
.bar2:nth-child(17) {
animation: u17 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -480px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u17 {
0% {
top: -600px;
left: 480px;
}
100% {
top: 0px;
left: 480px;
}
}
.bar2:nth-child(18) {
animation: u18 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -510px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u18 {
0% {
top: -600px;
left: 510px;
}
100% {
top: 0px;
left: 510px;
}
}
.bar2:nth-child(19) {
animation: u19 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -540px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u19 {
0% {
top: -600px;
left: 540px;
}
100% {
top: 0px;
left: 540px;
}
}
.bar2:nth-child(20) {
animation: u20 1.5s linear forwards 5s;
width: 30px;
height: 600px;
position: absolute;
background-position: -570px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u20 {
0% {
top: -600px;
left: 570px;
}
100% {
top: 0px;
left: 570px;
}
}
.bar3 {
width: 630px;
height: 600px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/406.jpg");
}
.bar3:nth-child(1) {
animation: v1 1.5s linear forwards 5s;
background-position: 0px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v1 {
0% {
top: 600px;
left: 0px;
}
100% {
top: 0px;
left: 0px;
}
}
.bar3:nth-child(2) {
animation: v2 1.5s linear forwards 5s;
background-position: -30px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v2 {
0% {
top: 600px;
left: 30px;
}
100% {
top: 0px;
left: 30px;
}
}
.bar3:nth-child(3) {
animation: v3 1.5s linear forwards 5s;
background-position: -60px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v3 {
0% {
top: 600px;
left: 60px;
}
100% {
top: 0px;
left: 60px;
}
}
.bar3:nth-child(4) {
animation: v4 1.5s linear forwards 5s;
background-position: -90px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v4 {
0% {
top: 600px;
left: 90px;
}
100% {
top: 0px;
left: 90px;
}
}
.bar3:nth-child(5) {
animation: v5 1.5s linear forwards 5s;
background-position: -120px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v5 {
0% {
top: 600px;
left: 120px;
}
100% {
top: 0px;
left: 120px;
}
}
.bar3:nth-child(6) {
animation: v6 1.5s linear forwards 5s;
background-position: -150px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v6 {
0% {
top: 600px;
left: 150px;
}
100% {
top: 0px;
left: 150px;
}
}
.bar3:nth-child(7) {
animation: v7 1.5s linear forwards 5s;
background-position: -180px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v7 {
0% {
top: 600px;
left: 180px;
}
100% {
top: 0px;
left: 180px;
}
}
.bar3:nth-child(8) {
animation: v8 1.5s linear forwards 5s;
background-position: -210px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v8 {
0% {
top: 600px;
left: 210px;
}
100% {
top: 0px;
left: 210px;
}
}
.bar3:nth-child(9) {
animation: v9 1.5s linear forwards 5s;
background-position: -240px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v9 {
0% {
top: 600px;
left: 240px;
}
100% {
top: 0px;
left: 240px;
}
}
.bar3:nth-child(10) {
animation: v10 1.5s linear forwards 5s;
background-position: -270px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v10 {
0% {
top: 600px;
left: 270px;
}
100% {
top: 0px;
left: 270px;
}
}
.bar3:nth-child(11) {
animation: v11 1.5s linear forwards 5s;
background-position: -300px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v11 {
0% {
top: 600px;
left: 300px;
}
100% {
top: 0px;
left: 300px;
}
}
.bar3:nth-child(12) {
animation: v12 1.5s linear forwards 5s;
background-position: -330px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v12 {
0% {
top: 600px;
left: 330px;
}
100% {
top: 0px;
left: 330px;
}
}
.bar3:nth-child(13) {
animation: v13 1.5s linear forwards 5s;
background-position: -360px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v13 {
0% {
top: 600px;
left: 360px;
}
100% {
top: 0px;
left: 360px;
}
}
.bar3:nth-child(14) {
animation: v14 1.5s linear forwards 5s;
background-position: -390px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v14 {
0% {
top: 600px;
left: 390px;
}
100% {
top: 0px;
left: 390px;
}
}
.bar3:nth-child(15) {
animation: v15 1.5s linear forwards 5s;
background-position: -420px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v15 {
0% {
top: 600px;
left: 420px;
}
100% {
top: 0px;
left: 420px;
}
}
.bar3:nth-child(16) {
animation: v16 1.5s linear forwards 5s;
background-position: -450px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v16 {
0% {
top: 600px;
left: 450px;
}
100% {
top: 0px;
left: 450px;
}
}
.bar3:nth-child(17) {
animation: v17 1.5s linear forwards 5s;
background-position: -480px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v17 {
0% {
top: 600px;
left: 480px;
}
100% {
top: 0px;
left: 480px;
}
}
.bar3:nth-child(18) {
animation: v18 1.5s linear forwards 5s;
background-position: -510px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v18 {
0% {
top: 600px;
left: 510px;
}
100% {
top: 0px;
left: 510px;
}
}
.bar3:nth-child(19) {
animation: v19 1.5s linear forwards 5s;
background-position: -540px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v19 {
0% {
top: 600px;
left: 540px;
}
100% {
top: 0px;
left: 540px;
}
}
.bar3:nth-child(20) {
animation: v20 1.5s linear forwards 5s;
background-position: -570px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v20 {
0% {
top: 600px;
left: 570px;
}
100% {
top: 0px;
left: 570px;
}
}
.bar4 {
width: 600px;
height: 30px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/407.png");
}
.bar4:nth-child(1) {
animation: s1 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% 0px;
left: -600px;
overflow: hidden;
}
@keyframes s1 {
0% {
left: -600px;
top: 0px;
}
100% {
left: 0px;
top: 0px;
}
}
.bar4:nth-child(2) {
animation: s2 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -30px;
left: -600px;
overflow: hidden;
}
@keyframes s2 {
0% {
left: -600px;
top: 30px;
}
100% {
left: 0px;
top: 30px;
}
}
.bar4:nth-child(3) {
animation: s3 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -60px;
left: -600px;
overflow: hidden;
}
@keyframes s3 {
0% {
left: -600px;
top: 60px;
}
100% {
left: 0px;
top: 60px;
}
}
.bar4:nth-child(4) {
animation: s4 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -90px;
left: -600px;
overflow: hidden;
}
@keyframes s4 {
0% {
left: -600px;
top: 90px;
}
100% {
left: 0px;
top: 90px;
}
}
.bar4:nth-child(5) {
animation: s5 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -120px;
left: -600px;
overflow: hidden;
}
@keyframes s5 {
0% {
left: -600px;
top: 120px;
}
100% {
left: 0px;
top: 120px;
}
}
.bar4:nth-child(6) {
animation: s6 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -150px;
left: -600px;
overflow: hidden;
}
@keyframes s6 {
0% {
left: -600px;
top: 150px;
}
100% {
left: 0px;
top: 150px;
}
}
.bar4:nth-child(7) {
animation: s7 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -180px;
left: -600px;
overflow: hidden;
}
@keyframes s7 {
0% {
left: -600px;
top: 180px;
}
100% {
left: 0px;
top: 180px;
}
}
.bar4:nth-child(8) {
animation: s8 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -210px;
left: -600px;
overflow: hidden;
}
@keyframes s8 {
0% {
left: -600px;
top: 210px;
}
100% {
left: 0px;
top: 210px;
}
}
.bar4:nth-child(9) {
animation: s9 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -240px;
left: -600px;
overflow: hidden;
}
@keyframes s9 {
0% {
left: -600px;
top: 240px;
}
100% {
left: 0px;
top: 240px;
}
}
.bar4:nth-child(10) {
animation: s10 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -270px;
left: -600px;
overflow: hidden;
}
@keyframes s10 {
0% {
left: -600px;
top: 270px;
}
100% {
left: 0px;
top: 270px;
}
}
.bar4:nth-child(11) {
animation: s11 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -300px;
left: -600px;
overflow: hidden;
}
@keyframes s11 {
0% {
left: -600px;
top: 300px;
}
100% {
left: 0px;
top: 300px;
}
}
.bar4:nth-child(12) {
animation: s12 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -330px;
left: -600px;
overflow: hidden;
}
@keyframes s12 {
0% {
left: -600px;
top: 330px;
}
100% {
left: 0px;
top: 330px;
}
}
.bar4:nth-child(13) {
animation: s13 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -360px;
left: -600px;
overflow: hidden;
}
@keyframes s13 {
0% {
left: -600px;
top: 360px;
}
100% {
left: 0px;
top: 360px;
}
}
.bar4:nth-child(14) {
animation: s14 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -390px;
left: -600px;
overflow: hidden;
}
@keyframes s14 {
0% {
left: -600px;
top: 390px;
}
100% {
left: 0px;
top: 390px;
}
}
.bar4:nth-child(15) {
animation: s15 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -420px;
left: -600px;
overflow: hidden;
}
@keyframes s15 {
0% {
left: -600px;
top: 420px;
}
100% {
left: 0px;
top: 420px;
}
}
.bar4:nth-child(16) {
animation: s16 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -450px;
left: -600px;
overflow: hidden;
}
@keyframes s16 {
0% {
left: -600px;
top: 450px;
}
100% {
left: 0px;
top: 450px;
}
}
.bar4:nth-child(17) {
animation: s17 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -480px;
left: -600px;
overflow: hidden;
}
@keyframes s17 {
0% {
left: -600px;
top: 480px;
}
100% {
left: 0px;
top: 480px;
}
}
.bar4:nth-child(18) {
animation: s18 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -510px;
left: -600px;
overflow: hidden;
}
@keyframes s18 {
0% {
left: -600px;
top: 510px;
}
100% {
left: 0px;
top: 510px;
}
}
.bar4:nth-child(19) {
animation: s19 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -540px;
left: -600px;
overflow: hidden;
}
@keyframes s19 {
0% {
left: -600px;
top: 540px;
}
100% {
left: 0px;
top: 540px;
}
}
.bar4:nth-child(20) {
animation: s20 1.5s linear forwards 10s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -570px;
left: -600px;
overflow: hidden;
}
@keyframes s20 {
0% {
left: -600px;
top: 570px;
}
100% {
left: 0px;
top: 570px;
}
}
.bar5 {
width: 600px;
height: 30px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/407.png");
}
.bar5:nth-child(1) {
animation: t1 1.5s linear forwards 10s;
background-position: 0% 0px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t1 {
0% {
left: 600px;
top: 0px;
}
100% {
left: 0px;
top: 0px;
}
}
.bar5:nth-child(2) {
animation: t2 1.5s linear forwards 10s;
background-position: 0% -30px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t2 {
0% {
left: 600px;
top: 30px;
}
100% {
left: 0px;
top: 30px;
}
}
.bar5:nth-child(3) {
animation: t3 1.5s linear forwards 10s;
background-position: 0% -60px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t3 {
0% {
left: 600px;
top: 60px;
}
100% {
left: 0px;
top: 60px;
}
}
.bar5:nth-child(4) {
animation: t4 1.5s linear forwards 10s;
background-position: 0% -90px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t4 {
0% {
left: 600px;
top: 90px;
}
100% {
left: 0px;
top: 90px;
}
}
.bar5:nth-child(5) {
animation: t5 1.5s linear forwards 10s;
background-position: 0% -120px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t5 {
0% {
left: 600px;
top: 120px;
}
100% {
left: 0px;
top: 120px;
}
}
.bar5:nth-child(6) {
animation: t6 1.5s linear forwards 10s;
background-position: 0% -150px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t6 {
0% {
left: 600px;
top: 150px;
}
100% {
left: 0px;
top: 150px;
}
}
.bar5:nth-child(7) {
animation: t7 1.5s linear forwards 10s;
background-position: 0% -180px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t7 {
0% {
left: 600px;
top: 180px;
}
100% {
left: 0px;
top: 180px;
}
}
.bar5:nth-child(8) {
animation: t8 1.5s linear forwards 10s;
background-position: 0% -210px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t8 {
0% {
left: 600px;
top: 210px;
}
100% {
left: 0px;
top: 210px;
}
}
.bar5:nth-child(9) {
animation: t9 1.5s linear forwards 10s;
background-position: 0% -240px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t9 {
0% {
left: 600px;
top: 240px;
}
100% {
left: 0px;
top: 240px;
}
}
.bar5:nth-child(10) {
animation: t10 1.5s linear forwards 10s;
background-position: 0% -270px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t10 {
0% {
left: 600px;
top: 270px;
}
100% {
left: 0px;
top: 270px;
}
}
.bar5:nth-child(11) {
animation: t11 1.5s linear forwards 10s;
background-position: 0% -300px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t11 {
0% {
left: 600px;
top: 300px;
}
100% {
left: 0px;
top: 300px;
}
}
.bar5:nth-child(12) {
animation: t12 1.5s linear forwards 10s;
background-position: 0% -330px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t12 {
0% {
left: 600px;
top: 330px;
}
100% {
left: 0px;
top: 330px;
}
}
.bar5:nth-child(13) {
animation: t13 1.5s linear forwards 10s;
background-position: 0% -360px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t13 {
0% {
left: 600px;
top: 360px;
}
100% {
left: 0px;
top: 360px;
}
}
.bar5:nth-child(14) {
animation: t14 1.5s linear forwards 10s;
background-position: 0% -390px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t14 {
0% {
left: 600px;
top: 390px;
}
100% {
left: 0px;
top: 390px;
}
}
.bar5:nth-child(15) {
animation: t15 1.5s linear forwards 10s;
background-position: 0% -420px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t15 {
0% {
left: 600px;
top: 420px;
}
100% {
left: 0px;
top: 420px;
}
}
.bar5:nth-child(16) {
animation: t16 1.5s linear forwards 10s;
background-position: 0% -450px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t16 {
0% {
left: 600px;
top: 450px;
}
100% {
left: 0px;
top: 450px;
}
}
.bar5:nth-child(17) {
animation: t17 1.5s linear forwards 10s;
background-position: 0% -480px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t17 {
0% {
left: 600px;
top: 480px;
}
100% {
left: 0px;
top: 480px;
}
}
.bar5:nth-child(18) {
animation: t18 1.5s linear forwards 10s;
background-position: 0% -510px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t18 {
0% {
left: 600px;
top: 510px;
}
100% {
left: 0px;
top: 510px;
}
}
.bar5:nth-child(19) {
animation: t19 1.5s linear forwards 10s;
background-position: 0% -540px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t19 {
0% {
left: 600px;
top: 540px;
}
100% {
left: 0px;
top: 540px;
}
}
.bar5:nth-child(20) {
animation: t20 1.5s linear forwards 10s;
background-position: 0% -570px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t20 {
0% {
left: 600px;
top: 570px;
}
100% {
left: 0px;
top: 570px;
}
}
.bar6 {
width: 30px;
height: 600px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/408.png");
}
.bar6:nth-child(1) {
animation: u1 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: 0px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u1 {
0% {
top: -600px;
left: 0px;
}
100% {
top: 0px;
left: 0px;
}
}
.bar6:nth-child(2) {
animation: u2 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -30px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u2 {
0% {
top: -600px;
left: 30px;
}
100% {
top: 0px;
left: 30px;
}
}
.bar6:nth-child(3) {
animation: u3 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -60px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u3 {
0% {
top: -600px;
left: 60px;
}
100% {
top: 0px;
left: 60px;
}
}
.bar6:nth-child(4) {
animation: u4 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -90px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u4 {
0% {
top: -600px;
left: 90px;
}
100% {
top: 0px;
left: 90px;
}
}
.bar6:nth-child(5) {
animation: u5 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -120px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u5 {
0% {
top: -600px;
left: 120px;
}
100% {
top: 0px;
left: 120px;
}
}
.bar6:nth-child(6) {
animation: u6 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -150px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u6 {
0% {
top: -600px;
left: 150px;
}
100% {
top: 0px;
left: 150px;
}
}
.bar6:nth-child(7) {
animation: u7 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -180px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u7 {
0% {
top: -600px;
left: 180px;
}
100% {
top: 0px;
left: 180px;
}
}
.bar6:nth-child(8) {
animation: u8 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -210px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u8 {
0% {
top: -600px;
left: 210px;
}
100% {
top: 0px;
left: 210px;
}
}
.bar6:nth-child(9) {
animation: u9 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -240px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u9 {
0% {
top: -600px;
left: 240px;
}
100% {
top: 0px;
left: 240px;
}
}
.bar6:nth-child(10) {
animation: u10 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -270px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u10 {
0% {
top: -600px;
left: 270px;
}
100% {
top: 0px;
left: 270px;
}
}
.bar6:nth-child(11) {
animation: u11 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -300px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u11 {
0% {
top: -600px;
left: 300px;
}
100% {
top: 0px;
left: 300px;
}
}
.bar6:nth-child(12) {
animation: u12 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -330px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u12 {
0% {
top: -600px;
left: 330px;
}
100% {
top: 0px;
left: 330px;
}
}
.bar6:nth-child(13) {
animation: u13 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -360px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u13 {
0% {
top: -600px;
left: 360px;
}
100% {
top: 0px;
left: 360px;
}
}
.bar6:nth-child(14) {
animation: u14 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -390px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u14 {
0% {
top: -600px;
left: 390px;
}
100% {
top: 0px;
left: 390px;
}
}
.bar6:nth-child(15) {
animation: u15 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -420px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u15 {
0% {
top: -600px;
left: 420px;
}
100% {
top: 0px;
left: 420px;
}
}
.bar6:nth-child(16) {
animation: u16 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -450px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u16 {
0% {
top: -600px;
left: 450px;
}
100% {
top: 0px;
left: 450px;
}
}
.bar6:nth-child(17) {
animation: u17 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -480px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u17 {
0% {
top: -600px;
left: 480px;
}
100% {
top: 0px;
left: 480px;
}
}
.bar6:nth-child(18) {
animation: u18 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -510px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u18 {
0% {
top: -600px;
left: 510px;
}
100% {
top: 0px;
left: 510px;
}
}
.bar6:nth-child(19) {
animation: u19 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -540px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u19 {
0% {
top: -600px;
left: 540px;
}
100% {
top: 0px;
left: 540px;
}
}
.bar6:nth-child(20) {
animation: u20 1.5s linear forwards 15s;
width: 30px;
height: 600px;
position: absolute;
background-position: -570px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u20 {
0% {
top: -600px;
left: 570px;
}
100% {
top: 0px;
left: 570px;
}
}
.bar7 {
width: 630px;
height: 600px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/408.png");
}
.bar7:nth-child(1) {
animation: v1 1.5s linear forwards 15s;
background-position: 0px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v1 {
0% {
top: 600px;
left: 0px;
}
100% {
top: 0px;
left: 0px;
}
}
.bar7:nth-child(2) {
animation: v2 1.5s linear forwards 15s;
background-position: -30px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v2 {
0% {
top: 600px;
left: 30px;
}
100% {
top: 0px;
left: 30px;
}
}
.bar7:nth-child(3) {
animation: v3 1.5s linear forwards 15s;
background-position: -60px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v3 {
0% {
top: 600px;
left: 60px;
}
100% {
top: 0px;
left: 60px;
}
}
.bar7:nth-child(4) {
animation: v4 1.5s linear forwards 15s;
background-position: -90px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v4 {
0% {
top: 600px;
left: 90px;
}
100% {
top: 0px;
left: 90px;
}
}
.bar7:nth-child(5) {
animation: v5 1.5s linear forwards 15s;
background-position: -120px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v5 {
0% {
top: 600px;
left: 120px;
}
100% {
top: 0px;
left: 120px;
}
}
.bar7:nth-child(6) {
animation: v6 1.5s linear forwards 15s;
background-position: -150px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v6 {
0% {
top: 600px;
left: 150px;
}
100% {
top: 0px;
left: 150px;
}
}
.bar7:nth-child(7) {
animation: v7 1.5s linear forwards 15s;
background-position: -180px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v7 {
0% {
top: 600px;
left: 180px;
}
100% {
top: 0px;
left: 180px;
}
}
.bar7:nth-child(8) {
animation: v8 1.5s linear forwards 15s;
background-position: -210px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v8 {
0% {
top: 600px;
left: 210px;
}
100% {
top: 0px;
left: 210px;
}
}
.bar7:nth-child(9) {
animation: v9 1.5s linear forwards 15s;
background-position: -240px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v9 {
0% {
top: 600px;
left: 240px;
}
100% {
top: 0px;
left: 240px;
}
}
.bar7:nth-child(10) {
animation: v10 1.5s linear forwards 15s;
background-position: -270px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v10 {
0% {
top: 600px;
left: 270px;
}
100% {
top: 0px;
left: 270px;
}
}
.bar7:nth-child(11) {
animation: v11 1.5s linear forwards 15s;
background-position: -300px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v11 {
0% {
top: 600px;
left: 300px;
}
100% {
top: 0px;
left: 300px;
}
}
.bar7:nth-child(12) {
animation: v12 1.5s linear forwards 15s;
background-position: -330px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v12 {
0% {
top: 600px;
left: 330px;
}
100% {
top: 0px;
left: 330px;
}
}
.bar7:nth-child(13) {
animation: v13 1.5s linear forwards 15s;
background-position: -360px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v13 {
0% {
top: 600px;
left: 360px;
}
100% {
top: 0px;
left: 360px;
}
}
.bar7:nth-child(14) {
animation: v14 1.5s linear forwards 15s;
background-position: -390px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v14 {
0% {
top: 600px;
left: 390px;
}
100% {
top: 0px;
left: 390px;
}
}
.bar7:nth-child(15) {
animation: v15 1.5s linear forwards 15s;
background-position: -420px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v15 {
0% {
top: 600px;
left: 420px;
}
100% {
top: 0px;
left: 420px;
}
}
.bar7:nth-child(16) {
animation: v16 1.5s linear forwards 15s;
background-position: -450px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v16 {
0% {
top: 600px;
left: 450px;
}
100% {
top: 0px;
left: 450px;
}
}
.bar7:nth-child(17) {
animation: v17 1.5s linear forwards 15s;
background-position: -480px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v17 {
0% {
top: 600px;
left: 480px;
}
100% {
top: 0px;
left: 480px;
}
}
.bar7:nth-child(18) {
animation: v18 1.5s linear forwards 15s;
background-position: -510px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v18 {
0% {
top: 600px;
left: 510px;
}
100% {
top: 0px;
left: 510px;
}
}
.bar7:nth-child(19) {
animation: v19 1.5s linear forwards 15s;
background-position: -540px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v19 {
0% {
top: 600px;
left: 540px;
}
100% {
top: 0px;
left: 540px;
}
}
.bar7:nth-child(20) {
animation: v20 1.5s linear forwards 15s;
background-position: -570px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v20 {
0% {
top: 600px;
left: 570px;
}
100% {
top: 0px;
left: 570px;
}
}
.bar8 {
width: 600px;
height: 30px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/410.png");
}
.bar8:nth-child(1) {
animation: s1 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% 0px;
left: -600px;
overflow: hidden;
}
@keyframes s1 {
0% {
left: -600px;
top: 0px;
}
100% {
left: 0px;
top: 0px;
}
}
.bar8:nth-child(2) {
animation: s2 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -30px;
left: -600px;
overflow: hidden;
}
@keyframes s2 {
0% {
left: -600px;
top: 30px;
}
100% {
left: 0px;
top: 30px;
}
}
.bar8:nth-child(3) {
animation: s3 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -60px;
left: -600px;
overflow: hidden;
}
@keyframes s3 {
0% {
left: -600px;
top: 60px;
}
100% {
left: 0px;
top: 60px;
}
}
.bar8:nth-child(4) {
animation: s4 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -90px;
left: -600px;
overflow: hidden;
}
@keyframes s4 {
0% {
left: -600px;
top: 90px;
}
100% {
left: 0px;
top: 90px;
}
}
.bar8:nth-child(5) {
animation: s5 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -120px;
left: -600px;
overflow: hidden;
}
@keyframes s5 {
0% {
left: -600px;
top: 120px;
}
100% {
left: 0px;
top: 120px;
}
}
.bar8:nth-child(6) {
animation: s6 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -150px;
left: -600px;
overflow: hidden;
}
@keyframes s6 {
0% {
left: -600px;
top: 150px;
}
100% {
left: 0px;
top: 150px;
}
}
.bar8:nth-child(7) {
animation: s7 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -180px;
left: -600px;
overflow: hidden;
}
@keyframes s7 {
0% {
left: -600px;
top: 180px;
}
100% {
left: 0px;
top: 180px;
}
}
.bar8:nth-child(8) {
animation: s8 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -210px;
left: -600px;
overflow: hidden;
}
@keyframes s8 {
0% {
left: -600px;
top: 210px;
}
100% {
left: 0px;
top: 210px;
}
}
.bar8:nth-child(9) {
animation: s9 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -240px;
left: -600px;
overflow: hidden;
}
@keyframes s9 {
0% {
left: -600px;
top: 240px;
}
100% {
left: 0px;
top: 240px;
}
}
.bar8:nth-child(10) {
animation: s10 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -270px;
left: -600px;
overflow: hidden;
}
@keyframes s10 {
0% {
left: -600px;
top: 270px;
}
100% {
left: 0px;
top: 270px;
}
}
.bar8:nth-child(11) {
animation: s11 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -300px;
left: -600px;
overflow: hidden;
}
@keyframes s11 {
0% {
left: -600px;
top: 300px;
}
100% {
left: 0px;
top: 300px;
}
}
.bar8:nth-child(12) {
animation: s12 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -330px;
left: -600px;
overflow: hidden;
}
@keyframes s12 {
0% {
left: -600px;
top: 330px;
}
100% {
left: 0px;
top: 330px;
}
}
.bar8:nth-child(13) {
animation: s13 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -360px;
left: -600px;
overflow: hidden;
}
@keyframes s13 {
0% {
left: -600px;
top: 360px;
}
100% {
left: 0px;
top: 360px;
}
}
.bar8:nth-child(14) {
animation: s14 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -390px;
left: -600px;
overflow: hidden;
}
@keyframes s14 {
0% {
left: -600px;
top: 390px;
}
100% {
left: 0px;
top: 390px;
}
}
.bar8:nth-child(15) {
animation: s15 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -420px;
left: -600px;
overflow: hidden;
}
@keyframes s15 {
0% {
left: -600px;
top: 420px;
}
100% {
left: 0px;
top: 420px;
}
}
.bar8:nth-child(16) {
animation: s16 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -450px;
left: -600px;
overflow: hidden;
}
@keyframes s16 {
0% {
left: -600px;
top: 450px;
}
100% {
left: 0px;
top: 450px;
}
}
.bar8:nth-child(17) {
animation: s17 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -480px;
left: -600px;
overflow: hidden;
}
@keyframes s17 {
0% {
left: -600px;
top: 480px;
}
100% {
left: 0px;
top: 480px;
}
}
.bar8:nth-child(18) {
animation: s18 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -510px;
left: -600px;
overflow: hidden;
}
@keyframes s18 {
0% {
left: -600px;
top: 510px;
}
100% {
left: 0px;
top: 510px;
}
}
.bar8:nth-child(19) {
animation: s19 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -540px;
left: -600px;
overflow: hidden;
}
@keyframes s19 {
0% {
left: -600px;
top: 540px;
}
100% {
left: 0px;
top: 540px;
}
}
.bar8:nth-child(20) {
animation: s20 1.5s linear forwards 20s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -570px;
left: -600px;
overflow: hidden;
}
@keyframes s20 {
0% {
left: -600px;
top: 570px;
}
100% {
left: 0px;
top: 570px;
}
}
.bar9 {
width: 600px;
height: 30px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/410.png");
}
.bar9:nth-child(1) {
animation: t1 1.5s linear forwards 20s;
background-position: 0% 0px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t1 {
0% {
left: 600px;
top: 0px;
}
100% {
left: 0px;
top: 0px;
}
}
.bar9:nth-child(2) {
animation: t2 1.5s linear forwards 20s;
background-position: 0% -30px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t2 {
0% {
left: 600px;
top: 30px;
}
100% {
left: 0px;
top: 30px;
}
}
.bar9:nth-child(3) {
animation: t3 1.5s linear forwards 20s;
background-position: 0% -60px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t3 {
0% {
left: 600px;
top: 60px;
}
100% {
left: 0px;
top: 60px;
}
}
.bar9:nth-child(4) {
animation: t4 1.5s linear forwards 20s;
background-position: 0% -90px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t4 {
0% {
left: 600px;
top: 90px;
}
100% {
left: 0px;
top: 90px;
}
}
.bar9:nth-child(5) {
animation: t5 1.5s linear forwards 20s;
background-position: 0% -120px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t5 {
0% {
left: 600px;
top: 120px;
}
100% {
left: 0px;
top: 120px;
}
}
.bar9:nth-child(6) {
animation: t6 1.5s linear forwards 20s;
background-position: 0% -150px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t6 {
0% {
left: 600px;
top: 150px;
}
100% {
left: 0px;
top: 150px;
}
}
.bar9:nth-child(7) {
animation: t7 1.5s linear forwards 20s;
background-position: 0% -180px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t7 {
0% {
left: 600px;
top: 180px;
}
100% {
left: 0px;
top: 180px;
}
}
.bar9:nth-child(8) {
animation: t8 1.5s linear forwards 20s;
background-position: 0% -210px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t8 {
0% {
left: 600px;
top: 210px;
}
100% {
left: 0px;
top: 210px;
}
}
.bar9:nth-child(9) {
animation: t9 1.5s linear forwards 20s;
background-position: 0% -240px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t9 {
0% {
left: 600px;
top: 240px;
}
100% {
left: 0px;
top: 240px;
}
}
.bar9:nth-child(10) {
animation: t10 1.5s linear forwards 20s;
background-position: 0% -270px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t10 {
0% {
left: 600px;
top: 270px;
}
100% {
left: 0px;
top: 270px;
}
}
.bar9:nth-child(11) {
animation: t11 1.5s linear forwards 20s;
background-position: 0% -300px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t11 {
0% {
left: 600px;
top: 300px;
}
100% {
left: 0px;
top: 300px;
}
}
.bar9:nth-child(12) {
animation: t12 1.5s linear forwards 20s;
background-position: 0% -330px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t12 {
0% {
left: 600px;
top: 330px;
}
100% {
left: 0px;
top: 330px;
}
}
.bar9:nth-child(13) {
animation: t13 1.5s linear forwards 20s;
background-position: 0% -360px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t13 {
0% {
left: 600px;
top: 360px;
}
100% {
left: 0px;
top: 360px;
}
}
.bar9:nth-child(14) {
animation: t14 1.5s linear forwards 20s;
background-position: 0% -390px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t14 {
0% {
left: 600px;
top: 390px;
}
100% {
left: 0px;
top: 390px;
}
}
.bar9:nth-child(15) {
animation: t15 1.5s linear forwards 20s;
background-position: 0% -420px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t15 {
0% {
left: 600px;
top: 420px;
}
100% {
left: 0px;
top: 420px;
}
}
.bar9:nth-child(16) {
animation: t16 1.5s linear forwards 20s;
background-position: 0% -450px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t16 {
0% {
left: 600px;
top: 450px;
}
100% {
left: 0px;
top: 450px;
}
}
.bar9:nth-child(17) {
animation: t17 1.5s linear forwards 20s;
background-position: 0% -480px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t17 {
0% {
left: 600px;
top: 480px;
}
100% {
left: 0px;
top: 480px;
}
}
.bar9:nth-child(18) {
animation: t18 1.5s linear forwards 20s;
background-position: 0% -510px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t18 {
0% {
left: 600px;
top: 510px;
}
100% {
left: 0px;
top: 510px;
}
}
.bar9:nth-child(19) {
animation: t19 1.5s linear forwards 20s;
background-position: 0% -540px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t19 {
0% {
left: 600px;
top: 540px;
}
100% {
left: 0px;
top: 540px;
}
}
.bar9:nth-child(20) {
animation: t20 1.5s linear forwards 20s;
background-position: 0% -570px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t20 {
0% {
left: 600px;
top: 570px;
}
100% {
left: 0px;
top: 570px;
}
}
.bar10 {
width: 30px;
height: 600px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/411.png");
}
.bar10:nth-child(1) {
animation: u1 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: 0px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u1 {
0% {
top: -600px;
left: 0px;
}
100% {
top: 0px;
left: 0px;
}
}
.bar10:nth-child(2) {
animation: u2 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -30px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u2 {
0% {
top: -600px;
left: 30px;
}
100% {
top: 0px;
left: 30px;
}
}
.bar10:nth-child(3) {
animation: u3 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -60px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u3 {
0% {
top: -600px;
left: 60px;
}
100% {
top: 0px;
left: 60px;
}
}
.bar10:nth-child(4) {
animation: u4 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -90px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u4 {
0% {
top: -600px;
left: 90px;
}
100% {
top: 0px;
left: 90px;
}
}
.bar10:nth-child(5) {
animation: u5 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -120px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u5 {
0% {
top: -600px;
left: 120px;
}
100% {
top: 0px;
left: 120px;
}
}
.bar10:nth-child(6) {
animation: u6 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -150px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u6 {
0% {
top: -600px;
left: 150px;
}
100% {
top: 0px;
left: 150px;
}
}
.bar10:nth-child(7) {
animation: u7 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -180px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u7 {
0% {
top: -600px;
left: 180px;
}
100% {
top: 0px;
left: 180px;
}
}
.bar10:nth-child(8) {
animation: u8 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -210px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u8 {
0% {
top: -600px;
left: 210px;
}
100% {
top: 0px;
left: 210px;
}
}
.bar10:nth-child(9) {
animation: u9 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -240px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u9 {
0% {
top: -600px;
left: 240px;
}
100% {
top: 0px;
left: 240px;
}
}
.bar10:nth-child(10) {
animation: u10 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -270px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u10 {
0% {
top: -600px;
left: 270px;
}
100% {
top: 0px;
left: 270px;
}
}
.bar10:nth-child(11) {
animation: u11 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -300px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u11 {
0% {
top: -600px;
left: 300px;
}
100% {
top: 0px;
left: 300px;
}
}
.bar10:nth-child(12) {
animation: u12 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -330px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u12 {
0% {
top: -600px;
left: 330px;
}
100% {
top: 0px;
left: 330px;
}
}
.bar10:nth-child(13) {
animation: u13 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -360px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u13 {
0% {
top: -600px;
left: 360px;
}
100% {
top: 0px;
left: 360px;
}
}
.bar10:nth-child(14) {
animation: u14 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -390px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u14 {
0% {
top: -600px;
left: 390px;
}
100% {
top: 0px;
left: 390px;
}
}
.bar10:nth-child(15) {
animation: u15 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -420px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u15 {
0% {
top: -600px;
left: 420px;
}
100% {
top: 0px;
left: 420px;
}
}
.bar10:nth-child(16) {
animation: u16 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -450px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u16 {
0% {
top: -600px;
left: 450px;
}
100% {
top: 0px;
left: 450px;
}
}
.bar10:nth-child(17) {
animation: u17 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -480px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u17 {
0% {
top: -600px;
left: 480px;
}
100% {
top: 0px;
left: 480px;
}
}
.bar10:nth-child(18) {
animation: u18 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -510px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u18 {
0% {
top: -600px;
left: 510px;
}
100% {
top: 0px;
left: 510px;
}
}
.bar10:nth-child(19) {
animation: u19 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -540px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u19 {
0% {
top: -600px;
left: 540px;
}
100% {
top: 0px;
left: 540px;
}
}
.bar10:nth-child(20) {
animation: u20 1.5s linear forwards 25s;
width: 30px;
height: 600px;
position: absolute;
background-position: -570px 0%;
top: -600px;
overflow: hidden;
}
@keyframes u20 {
0% {
top: -600px;
left: 570px;
}
100% {
top: 0px;
left: 570px;
}
}
.bar11 {
width: 630px;
height: 600px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/411.png");
}
.bar11:nth-child(1) {
animation: v1 1.5s linear forwards 25s;
background-position: 0px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v1 {
0% {
top: 600px;
left: 0px;
}
100% {
top: 0px;
left: 0px;
}
}
.bar11:nth-child(2) {
animation: v2 1.5s linear forwards 25s;
background-position: -30px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v2 {
0% {
top: 600px;
left: 30px;
}
100% {
top: 0px;
left: 30px;
}
}
.bar11:nth-child(3) {
animation: v3 1.5s linear forwards 25s;
background-position: -60px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v3 {
0% {
top: 600px;
left: 60px;
}
100% {
top: 0px;
left: 60px;
}
}
.bar11:nth-child(4) {
animation: v4 1.5s linear forwards 25s;
background-position: -90px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v4 {
0% {
top: 600px;
left: 90px;
}
100% {
top: 0px;
left: 90px;
}
}
.bar11:nth-child(5) {
animation: v5 1.5s linear forwards 25s;
background-position: -120px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v5 {
0% {
top: 600px;
left: 120px;
}
100% {
top: 0px;
left: 120px;
}
}
.bar11:nth-child(6) {
animation: v6 1.5s linear forwards 25s;
background-position: -150px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v6 {
0% {
top: 600px;
left: 150px;
}
100% {
top: 0px;
left: 150px;
}
}
.bar11:nth-child(7) {
animation: v7 1.5s linear forwards 25s;
background-position: -180px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v7 {
0% {
top: 600px;
left: 180px;
}
100% {
top: 0px;
left: 180px;
}
}
.bar11:nth-child(8) {
animation: v8 1.5s linear forwards 25s;
background-position: -210px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v8 {
0% {
top: 600px;
left: 210px;
}
100% {
top: 0px;
left: 210px;
}
}
.bar11:nth-child(9) {
animation: v9 1.5s linear forwards 25s;
background-position: -240px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v9 {
0% {
top: 600px;
left: 240px;
}
100% {
top: 0px;
left: 240px;
}
}
.bar11:nth-child(10) {
animation: v10 1.5s linear forwards 25s;
background-position: -270px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v10 {
0% {
top: 600px;
left: 270px;
}
100% {
top: 0px;
left: 270px;
}
}
.bar11:nth-child(11) {
animation: v11 1.5s linear forwards 25s;
background-position: -300px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v11 {
0% {
top: 600px;
left: 300px;
}
100% {
top: 0px;
left: 300px;
}
}
.bar11:nth-child(12) {
animation: v12 1.5s linear forwards 25s;
background-position: -330px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v12 {
0% {
top: 600px;
left: 330px;
}
100% {
top: 0px;
left: 330px;
}
}
.bar11:nth-child(13) {
animation: v13 1.5s linear forwards 25s;
background-position: -360px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v13 {
0% {
top: 600px;
left: 360px;
}
100% {
top: 0px;
left: 360px;
}
}
.bar11:nth-child(14) {
animation: v14 1.5s linear forwards 25s;
background-position: -390px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v14 {
0% {
top: 600px;
left: 390px;
}
100% {
top: 0px;
left: 390px;
}
}
.bar11:nth-child(15) {
animation: v15 1.5s linear forwards 25s;
background-position: -420px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v15 {
0% {
top: 600px;
left: 420px;
}
100% {
top: 0px;
left: 420px;
}
}
.bar11:nth-child(16) {
animation: v16 1.5s linear forwards 25s;
background-position: -450px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v16 {
0% {
top: 600px;
left: 450px;
}
100% {
top: 0px;
left: 450px;
}
}
.bar11:nth-child(17) {
animation: v17 1.5s linear forwards 25s;
background-position: -480px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v17 {
0% {
top: 600px;
left: 480px;
}
100% {
top: 0px;
left: 480px;
}
}
.bar11:nth-child(18) {
animation: v18 1.5s linear forwards 25s;
background-position: -510px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v18 {
0% {
top: 600px;
left: 510px;
}
100% {
top: 0px;
left: 510px;
}
}
.bar11:nth-child(19) {
animation: v19 1.5s linear forwards 25s;
background-position: -540px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v19 {
0% {
top: 600px;
left: 540px;
}
100% {
top: 0px;
left: 540px;
}
}
.bar11:nth-child(20) {
animation: v20 1.5s linear forwards 25s;
background-position: -570px 0%;
width: 30px;
height: 600px;
position: absolute;
top: 600px;
overflow: hidden;
}
@keyframes v20 {
0% {
top: 600px;
left: 570px;
}
100% {
top: 0px;
left: 570px;
}
}
.bar12 {
width: 600px;
height: 30px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/409_2.png");
}
.bar12:nth-child(1) {
animation: s1 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% 0px;
left: -600px;
overflow: hidden;
}
@keyframes s1 {
0% {
left: -600px;
top: 0px;
}
100% {
left: 0px;
top: 0px;
}
}
.bar12:nth-child(2) {
animation: s2 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -30px;
left: -600px;
overflow: hidden;
}
@keyframes s2 {
0% {
left: -600px;
top: 30px;
}
100% {
left: 0px;
top: 30px;
}
}
.bar12:nth-child(3) {
animation: s3 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -60px;
left: -600px;
overflow: hidden;
}
@keyframes s3 {
0% {
left: -600px;
top: 60px;
}
100% {
left: 0px;
top: 60px;
}
}
.bar12:nth-child(4) {
animation: s4 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -90px;
left: -600px;
overflow: hidden;
}
@keyframes s4 {
0% {
left: -600px;
top: 90px;
}
100% {
left: 0px;
top: 90px;
}
}
.bar12:nth-child(5) {
animation: s5 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -120px;
left: -600px;
overflow: hidden;
}
@keyframes s5 {
0% {
left: -600px;
top: 120px;
}
100% {
left: 0px;
top: 120px;
}
}
.bar12:nth-child(6) {
animation: s6 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -150px;
left: -600px;
overflow: hidden;
}
@keyframes s6 {
0% {
left: -600px;
top: 150px;
}
100% {
left: 0px;
top: 150px;
}
}
.bar12:nth-child(7) {
animation: s7 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -180px;
left: -600px;
overflow: hidden;
}
@keyframes s7 {
0% {
left: -600px;
top: 180px;
}
100% {
left: 0px;
top: 180px;
}
}
.bar12:nth-child(8) {
animation: s8 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -210px;
left: -600px;
overflow: hidden;
}
@keyframes s8 {
0% {
left: -600px;
top: 210px;
}
100% {
left: 0px;
top: 210px;
}
}
.bar12:nth-child(9) {
animation: s9 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -240px;
left: -600px;
overflow: hidden;
}
@keyframes s9 {
0% {
left: -600px;
top: 240px;
}
100% {
left: 0px;
top: 240px;
}
}
.bar12:nth-child(10) {
animation: s10 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -270px;
left: -600px;
overflow: hidden;
}
@keyframes s10 {
0% {
left: -600px;
top: 270px;
}
100% {
left: 0px;
top: 270px;
}
}
.bar12:nth-child(11) {
animation: s11 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -300px;
left: -600px;
overflow: hidden;
}
@keyframes s11 {
0% {
left: -600px;
top: 300px;
}
100% {
left: 0px;
top: 300px;
}
}
.bar12:nth-child(12) {
animation: s12 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -330px;
left: -600px;
overflow: hidden;
}
@keyframes s12 {
0% {
left: -600px;
top: 330px;
}
100% {
left: 0px;
top: 330px;
}
}
.bar12:nth-child(13) {
animation: s13 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -360px;
left: -600px;
overflow: hidden;
}
@keyframes s13 {
0% {
left: -600px;
top: 360px;
}
100% {
left: 0px;
top: 360px;
}
}
.bar12:nth-child(14) {
animation: s14 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -390px;
left: -600px;
overflow: hidden;
}
@keyframes s14 {
0% {
left: -600px;
top: 390px;
}
100% {
left: 0px;
top: 390px;
}
}
.bar12:nth-child(15) {
animation: s15 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -420px;
left: -600px;
overflow: hidden;
}
@keyframes s15 {
0% {
left: -600px;
top: 420px;
}
100% {
left: 0px;
top: 420px;
}
}
.bar12:nth-child(16) {
animation: s16 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -450px;
left: -600px;
overflow: hidden;
}
@keyframes s16 {
0% {
left: -600px;
top: 450px;
}
100% {
left: 0px;
top: 450px;
}
}
.bar12:nth-child(17) {
animation: s17 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -480px;
left: -600px;
overflow: hidden;
}
@keyframes s17 {
0% {
left: -600px;
top: 480px;
}
100% {
left: 0px;
top: 480px;
}
}
.bar12:nth-child(18) {
animation: s18 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -510px;
left: -600px;
overflow: hidden;
}
@keyframes s18 {
0% {
left: -600px;
top: 510px;
}
100% {
left: 0px;
top: 510px;
}
}
.bar12:nth-child(19) {
animation: s19 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -540px;
left: -600px;
overflow: hidden;
}
@keyframes s19 {
0% {
left: -600px;
top: 540px;
}
100% {
left: 0px;
top: 540px;
}
}
.bar12:nth-child(20) {
animation: s20 1.5s linear forwards 30s;
width: 600px;
height: 30px;
position: absolute;
background-position: 0% -570px;
left: -600px;
overflow: hidden;
}
@keyframes s20 {
0% {
left: -600px;
top: 570px;
}
100% {
left: 0px;
top: 570px;
}
}
.bar13 {
width: 600px;
height: 30px;
background: black;
/*fallback*/
background-image: url("https://assets.codepen.io/439415/409_2.png");
}
.bar13:nth-child(1) {
animation: t1 1.5s linear forwards 30s;
background-position: 0% 0px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t1 {
0% {
left: 600px;
top: 0px;
}
100% {
left: 0px;
top: 0px;
}
}
.bar13:nth-child(2) {
animation: t2 1.5s linear forwards 30s;
background-position: 0% -30px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t2 {
0% {
left: 600px;
top: 30px;
}
100% {
left: 0px;
top: 30px;
}
}
.bar13:nth-child(3) {
animation: t3 1.5s linear forwards 30s;
background-position: 0% -60px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t3 {
0% {
left: 600px;
top: 60px;
}
100% {
left: 0px;
top: 60px;
}
}
.bar13:nth-child(4) {
animation: t4 1.5s linear forwards 30s;
background-position: 0% -90px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t4 {
0% {
left: 600px;
top: 90px;
}
100% {
left: 0px;
top: 90px;
}
}
.bar13:nth-child(5) {
animation: t5 1.5s linear forwards 30s;
background-position: 0% -120px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t5 {
0% {
left: 600px;
top: 120px;
}
100% {
left: 0px;
top: 120px;
}
}
.bar13:nth-child(6) {
animation: t6 1.5s linear forwards 30s;
background-position: 0% -150px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t6 {
0% {
left: 600px;
top: 150px;
}
100% {
left: 0px;
top: 150px;
}
}
.bar13:nth-child(7) {
animation: t7 1.5s linear forwards 30s;
background-position: 0% -180px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t7 {
0% {
left: 600px;
top: 180px;
}
100% {
left: 0px;
top: 180px;
}
}
.bar13:nth-child(8) {
animation: t8 1.5s linear forwards 30s;
background-position: 0% -210px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t8 {
0% {
left: 600px;
top: 210px;
}
100% {
left: 0px;
top: 210px;
}
}
.bar13:nth-child(9) {
animation: t9 1.5s linear forwards 30s;
background-position: 0% -240px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t9 {
0% {
left: 600px;
top: 240px;
}
100% {
left: 0px;
top: 240px;
}
}
.bar13:nth-child(10) {
animation: t10 1.5s linear forwards 30s;
background-position: 0% -270px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t10 {
0% {
left: 600px;
top: 270px;
}
100% {
left: 0px;
top: 270px;
}
}
.bar13:nth-child(11) {
animation: t11 1.5s linear forwards 30s;
background-position: 0% -300px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t11 {
0% {
left: 600px;
top: 300px;
}
100% {
left: 0px;
top: 300px;
}
}
.bar13:nth-child(12) {
animation: t12 1.5s linear forwards 30s;
background-position: 0% -330px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t12 {
0% {
left: 600px;
top: 330px;
}
100% {
left: 0px;
top: 330px;
}
}
.bar13:nth-child(13) {
animation: t13 1.5s linear forwards 30s;
background-position: 0% -360px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t13 {
0% {
left: 600px;
top: 360px;
}
100% {
left: 0px;
top: 360px;
}
}
.bar13:nth-child(14) {
animation: t14 1.5s linear forwards 30s;
background-position: 0% -390px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t14 {
0% {
left: 600px;
top: 390px;
}
100% {
left: 0px;
top: 390px;
}
}
.bar13:nth-child(15) {
animation: t15 1.5s linear forwards 30s;
background-position: 0% -420px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t15 {
0% {
left: 600px;
top: 420px;
}
100% {
left: 0px;
top: 420px;
}
}
.bar13:nth-child(16) {
animation: t16 1.5s linear forwards 30s;
background-position: 0% -450px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t16 {
0% {
left: 600px;
top: 450px;
}
100% {
left: 0px;
top: 450px;
}
}
.bar13:nth-child(17) {
animation: t17 1.5s linear forwards 30s;
background-position: 0% -480px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t17 {
0% {
left: 600px;
top: 480px;
}
100% {
left: 0px;
top: 480px;
}
}
.bar13:nth-child(18) {
animation: t18 1.5s linear forwards 30s;
background-position: 0% -510px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t18 {
0% {
left: 600px;
top: 510px;
}
100% {
left: 0px;
top: 510px;
}
}
.bar13:nth-child(19) {
animation: t19 1.5s linear forwards 30s;
background-position: 0% -540px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t19 {
0% {
left: 600px;
top: 540px;
}
100% {
left: 0px;
top: 540px;
}
}
.bar13:nth-child(20) {
animation: t20 1.5s linear forwards 30s;
background-position: 0% -570px;
width: 600px;
height: 30px;
position: absolute;
left: 600px;
overflow: hidden;
}
@keyframes t20 {
0% {
left: 600px;
top: 570px;
}
100% {
left: 0px;
top: 570px;
}
}
That’s all! hopefully, you have successfully created a Pure CSS Image Slideshow on your website. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
Lightweight Image Slider in Vanilla JS
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.