JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
        <div class="planet__1 planet"></div>
        <div class="planet__2 planet"></div>
        <div class="planet__3 planet"></div>
    </div>

CSS

.block {
    width: 600px;
    height: 600px;
    background: #ccc;
    display: flex;
}

.planet {
    width: 30px;
    height: 30px;
    background: #000;
    display: flex;
}

.planet__1 {
    animation: fly ease 5s infinite;
}

@keyframes fly {

    0% {
        transform: translate(110px, 120px);
    }

    25% {
        transform: translate(150px, 130px);
    }

    50% {
        transform: translate(290px, 240px);
    }

    75% {
        transform: translate(350px, 470px);
    }

    100% {
        transform: translate(190px, 230px);
    }
}

.planet__2 {
    animation: fly2 ease 5s infinite;
}

@keyframes fly2 {

    0% {
        transform: translate(190px, 20px);
    }

    25% {
        transform: translate(350px, 30px);
    }

    50% {
        transform: translate(390px, 140px);
    }

    75% {
        transform: translate(290px, 170px);
    }

    100% {
        transform: translate(100px, 20px);
    }
}


.planet__3 {
    animation: fly3 ease 5s infinite;
}

@keyframes fly3 {

    0% {
        transform: translate(199px, 290px);
    }

    25% {
        transform: translate(510px, 350px);
    }

    50% {
        transform: translate(410px, 540px);
    }

    75% {
        transform: translate(290px, 342px);
    }

    100% {
        transform: translate(500px, 275px);
    }
}