<! DOCTYPE html>
<html>
<head></head>
<body>
<div id="container">
<div id="ball1" class="ball"></div>
<div id="ball2" class="ball"></div>
<div id="ball3" class="ball"></div>
<div id="ball4" class="ball"></div>
<div>
</body>
</html>
body {
background-color:rgba(255, 249, 222, 1);
}
#container {
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
}
.ball {
height:50px;
width:50px;
border-radius:100%;
margin-left:20px;
margin-top:10px;
animation-name:ball-bounce;
animation-iteration-count:infinite;
animation-duration:2s;
animation-timing-function:cubic-bezier(0.5, 0.5, 0.5, 0.5);
}
#ball1 {
background-color:rgba(197, 239, 247, 1);
animation-delay:0.5s;
}
#ball2 {
background-color:rgba(241, 231, 254, 1);
animation-delay:0.1s;
}
#ball3 {
background-color:rgba(200, 247, 197, 1);
animation-delay:0.3s;
}
#ball4 {
background-color:rgba(241, 169, 160, 1);
}
@keyframes ball-bounce {
0% { transform:translate(0px,0px);}
25% {transform:translate(0px, 300px);}
50%{ transform:translate(0,100px);}
70% {transform:translate(0px,300px);}
100% {transform:translate(0px,0px);}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.