* {
    margin: 0;
    padding: 0;
}

.circle1,
.circle2,
.circle3,
.circle4,
.circle5 {
    position: absolute;
    height: 6.5rem;
    width: 6.5rem;
    border-radius: 50%;
}

.circle1 {
    background-color: orangered;
    animation: circle 10s ease-in-out 1.5s infinite normal;
}

.circle2 {
    background-color: pink;
    animation: circle 10s ease-in-out 1.7s infinite normal;
}

.circle3 {
    background-color: blue;
    animation: circle 10s ease-in-out 1.9s infinite normal;
}

.circle4 {
    background-color: red;
    animation: circle 10s ease-in-out 2.1s infinite normal;
}

.circle5 {
    background-color: yellow;
    animation: circle 10s ease-in-out 2.3s infinite normal;
}

@keyframes circle {
    0% {
        top: 0;
        left: 0rem;
    }
    25% {
        left: 35rem;
        top: 0;
    }
    50% { 
        left: 35rem;
        top: 35rem;
    }
    75% {
        left: 0;
        top: 35rem;
    }
    100% {
        left: 0;
        top: 0;
    }
}