Oinktube/plugin/Layout/animatedBackGrounds/Animated3.php

<style>
    body{
        background: radial-gradient(#AAA, #333);
    }
    .ball {
        position: absolute;
        border-radius: 100%;
        opacity: 0.7;
    }
    #aminated3Container{
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        z-index: -1;
    }
</style>
<div id="aminated3Container"></div>
<script>
// Some random colors
    const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];

    const numBalls = 50;
    const balls = [];

    for (let i = 0; i < numBalls; i++) {
        let ball = document.createElement("div");
        ball.classList.add("ball");
        ball.style.background = colors[Math.floor(Math.random() * colors.length)];
        ball.style.left = `${Math.floor(Math.random() * 100)}vw`;
        ball.style.top = `${Math.floor(Math.random() * 100)}vh`;
        ball.style.transform = `scale(${Math.random()})`;
        ball.style.width = `${Math.random()}em`;
        ball.style.height = ball.style.width;

        balls.push(ball);
        //document.body.append(ball);
        document.getElementById("aminated3Container").appendChild(ball);
    }

// Keyframes
    balls.forEach((el, i, ra) => {
        let to = {
            x: Math.random() * (i % 2 === 0 ? -11 : 11),
            y: Math.random() * 12
        };

        let anim = el.animate(
                [
                    {transform: "translate(0, 0)"},
                    {transform: `translate(${to.x}rem, ${to.y}rem)`}
                ],
                {
                    duration: (Math.random() + 1) * 2000, // random duration
                    direction: "alternate",
                    fill: "both",
                    iterations: Infinity,
                    easing: "ease-in-out"
                }
        );
    });
</script>