Prosta animacja CSS

Question

Chce by container byl wyrownany i obracal sie w miejscu. POMOCY

#container{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:100px;
    height:100px;
    background:lime;
    border-radius:50%;
    animation:animation 5s infinite;
}
span{
    position:absolute;
    width:15px;
    height:15px;
    border-radius:50%;
    background:white;
}
span:nth-child(1){
    top:50%;
    left:20%;
    transform: translate(-50%, -50%);
}
span:nth-child(2){
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
span:nth-child(3){
    top:50%;
    left:80%;
    transform: translate(-50%, -50%);
}

@keyframes animation{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

Answer 1

Ale co nie działa? wrzuć to może do jsfiddle, albo innego online compilera i pokaż.

Comments

Chodzi o to że gdy animacja jest podpięta do diva to on traci swój translate i ucieka na bok i do dołu.

Tu masz całość i rezultat

https://jsfiddle.net/matikster1/42arthLs/6/

---

Nie wiem o Ci chodzi, a jaki ma być finalny efekt? Obraca się o 360stopni

---

Obracać się obraca ale w "xd" jest zapisane transform:translate(-50%,-50%) a przez animacje to zanika i w całokształcie nie jest na środku

---

@bartekDSAXN, to nie mam pojęcia o co Ci chodzi, jak chcesz coś przzesunąć, to możesz też użyć position: relative