CSS
@keyframes pink {
50% {
transform: translateX(30px);
}
}
@keyframes blue {
0% {
z-index: 1;
}
50% {
transform: translateX(-30px);
}
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.dot-blue, .dot-pink {
position: absolute;
width: 50px;
height: 50px;
border-radius: 100%;
animation: blue 1.15s infinite ease-in-out;
}
.dot-blue {
background: #0163DB;
transform: translateX(30px);
}
.dot-pink {
background: #ED4B70;
transform: translateX(-30px);
animation-name: pink;
}
