CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
background: #141E30;
background: linear-gradient(to left, #141E30 , #243B55);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
position: relative;
}
.outer {
display: block;
float: left;
width: 60px;
position: absolute;
}
.outer-1 {
left: -40px;
animation: bouncy1 1.5s infinite;
}
.outer-2 {
animation: bouncy2 1.5s infinite;
left: 0;
}
.outer-3 {
animation: bouncy3 1.5s infinite;
left: 40px;
}
.dot {
height: 20px;
width: 20px;
border-radius: 50%;
background: #bdc3c7;
}
@keyframes bouncy1 {
0% {transform: translate(0px,0px) rotate(0deg);}
50% {transform: translate(0px,0px) rotate(180deg);}
100% {transform: translate(40px,0px) rotate(-180deg);}
}
@keyframes bouncy2 {
0% {transform: translateX(0px);}
50% {transform: translateX(-40px);}
100% {transform: translateX(-40px);}
}
@keyframes bouncy3 {
0% {transform: translateX(0px);}
50% {transform: translateX(0px);}
100% {transform: translateX(-40px);}
}
