html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background-color: black;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background-color: lightpink;
}

#circle1 {
    animation: moveDiagonal 10s linear infinite;
}

#circle2 {
    animation: moveDiagonal 8s linear infinite;
    background-color: green;
    animation-delay: 2s;
}

#circle3 {
    animation: moveDiagonal 12s linear infinite;
    background-color: deepskyblue;
    animation-delay: 4s;
}

@keyframes moveDiagonal {
    0%, 100% { top: 0; left: 0; }
    50% { top: 100%; left: 100%; }
}