import { Stear } from "../stear/main.js";

var animation = Stear.addAnimation({
    "0%":     {left:  "4%",top:  "4%"},
    "8.33%":  {left: "52%",top:  "4%"},
    "25%":    {left: "52%",top:  "4%"},
    "33.33%": {left: "52%",top: "52%"},
    "50%":    {left: "52%",top: "52%"},
    "58.33%": {left:  "4%",top: "52%"},
    "75%":    {left:  "4%",top: "52%"},
    "83.33%": {left:  "4%",top:  "4%"},
    "100%":   {left:  "4%",top:  "4%"},
});

Stear.addGlobalStyleJSON({
    display: "inline-block",
    position: "relative",
    width: "80px",
    height: "80px",
},".box");

Stear.addGlobalStyleJSON({
    position: "absolute",
    height: "44%",
    width: "44%",
    borderRadius: "25%",
    backgroundColor: "#000",
    animation: `${animation} 6s linear infinite`,
},".box div");

Stear.addGlobalStyleJSON({
    animationDelay: "0s"
}, ".box div:nth-child(1)");

Stear.addGlobalStyleJSON({
    animationDelay: "-2s"
}, ".box div:nth-child(2)");

Stear.addGlobalStyleJSON({
    animationDelay: "-4s"
}, ".box div:nth-child(3)");