CSS
body {
background: #17A05D;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin: -38px 0 0 -93px;
}
.rect {
position: relative;
display: inline-block;
background: #fff;
width: 15px;
height: 70px;
border-radius: 5px;
animation: rect 1.2s infinite;
}
.rect:nth-child(2) {animation-delay: 0.1s;}
.rect:nth-child(3) {animation-delay: 0.2s;}
.rect:nth-child(4) {animation-delay: 0.3s;}
.rect:nth-child(5) {animation-delay: 0.4s;}
.rect:nth-child(6) {animation-delay: 0.5s;}
.rect:nth-child(7) {animation-delay: 0.6s;}
.rect:nth-child(8) {animation-delay: 0.7s;}
.rect:nth-child(9) {animation-delay: 0.8s;}
.rect:nth-child(10) {animation-delay: 0.9s;}
@keyframes rect {
0% {
transform: translateY(5px);
}
50% {
transform: translateY(-5px);
box-shadow: 2px 6px 6px rgba(255,255,255,0.9);
}
100% {
transform: translateY(5px);
}
}
