- let i = 0;
while i++ < 10
    .div
View Compiled 
div {
    --size: 8vmin;
    width: var(--size);
    height: var(--size);
    /*     transform: scale(1); */
    border-radius: 8%;
    background: #616aff;
}
View Compiled 
import { animate } from "https://cdn.skypack.dev/@okikio/animate";

(async () => {
    let [options] = await animate({
        target: ".div",

        translateX: [0, 300],
        duration: 2000,
        speed: 2,
        fillMode: "both",
        direction: "normal",
        delay(i) {
            return (i + 1) * 200;
        },
        autoplay: true
    });

    await animate({
        options,
        transform: ["translateX(300px)", "translateX(0px)"]
    });

    console.log("The Animation is done...");
})();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.