Looking to replicate a similar effect using CSS animations:
I've created a file working with keyframes for the animation, but it's not functioning as desired.
My goal is to have the circles complete a full rotation on their axis, starting from a fixed point at the center.
Thank you.
HTML FILE:
<ul>
<li style="animation: move1 2s infinite;"></li>
<li style="animation: move2 2s infinite;"></li>
<li style="animation: move3 2s infinite;"></li>
<li style="animation: move4 2s infinite;"></li>
<li style="animation: move5 2s infinite;"></li>
<li style="animation: move6 2s infinite;"></li>
<li style="animation: move7 2s infinite;"></li>
<li style="animation: move8 2s infinite;"></li>
<li style="animation: move9 2s infinite;"></li>
<li style="animation: move10 2s infinite;"></li>
</ul>
</body>
CSS FILE:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
ul{
display: block;
width: 1920px;
height: 1080px;
margin: 0;
padding: 0;
}
li {
position: absolute;
display: block;
top: 50%;
left: 50%;
/*transform: translate(-50%, -50%);*/
border: 1px solid #000;
border-radius: 100%;
list-style: none;
}
@keyframes move1 {
0% {
transform: translate(-46%, -50%);
width:400px; height:400px;
}
50% {
transform: translate(-54%, -50%);
width:400px; height:400px;
}
100% {
transform: translate(-46%, -50%);
width:400px; height:400px;
}
}
@keyframes move2 {
0% {
transform: translate(-50%, -46%);
width:405px; height:405px;
}
50% {
transform: translate(-50%, -54%);
width:405px; height:405px;
}
100% {
transform: translate(-50%, -46%);
width:405px; height:405px;
}
}
@keyframes move3 {
0% {
transform: translate(-47%, -50%);
width:410px; height:410px;
}
50% {
transform: translate(-55%, -50%);
width:410px; height:410px;
}
100% {
transform: translate(-47%, -50%);
width:410px; height:410px;
}
}
@keyframes move4 {
0% {
transform: translate(-50%, -48%);
width:415px; height:415px;
}
50% {
transform: translate(-50%, -56%);
width:415px; height:415px;
}
100% {
transform: translate(-50%, -48%);
width:415px; height:415px;
}
}
@keyframes move5 {
0% {
transform: translate(-49%, -50%);
width:420px; height:420px;
}
50% {
transform: translate(-57%, -50%);
width:420px; height:420px;
}
100% {
transform: translate(-49%, -50%);
width:420px; height:420px;
}
}
@keyframes move6 {
0% {
transform: translate(-50%, -50%);
width:425px; height:425px;
}
50% {
transform: translate(-50%, -58%);
width:425px; height:425px;
}
100% {
transform: translate(-50%, -50%);
width:425px; height:425px;
}
}
@keyframes move7 {
0% {
transform: translate(-51%, -50%);
width:430px; height:430px;
}
50% {
transform: translate(-59%, -50%);
width:430px; height:430px;
}
100% {
transform: translate(-51%, -50%);
width:430px; height:430px;
}
}
@keyframes move8 {
0% {
transform: translate(-50%, -52%);
width:435px; height:435px;
}
50% {
transform: translate(-50%, -60%);
width:435px; height:435px;
}
100% {
transform: translate(-50%, -52%);
width:435px; height:435px;
}
}
@keyframes move9 {
0% {
transform: translate(-53%, -50%);
width:440px; height:440px;
}
50% {
transform: translate(-61%, -50%);
width:440px; height:440px;
}
100% {
transform: translate(-53%, -50%);
width:440px; height:440px;
}
}
@keyframes move10 {
0% {
transform: translate(-50%, -54%);
width:445px; height:445px;
}
50% {
transform: translate(-50%, -62%);
width:445px; height:445px;
}
100% {
transform: translate(-50%, -54%);
width:445px; height:445px;
}
}