liタグを円状に並べてずっとスライドできるようにしたい。

ul {
    width: 100px;
    height: 100px;
}

li {
    offset-path: circle(30% at center);
    width: max-content;
    animation: test 10s linear 0s infinite forwards;
}

li:nth-child(1) {
    animation-delay: -10s;
}

li:nth-child(2) {
    animation-delay: -9s;
}

li:nth-child(3) {
    animation-delay: -8s;
}

li:nth-child(4) {
    animation-delay: -7s;
}

li:nth-child(5) {
    animation-delay: -6s;
}

li:nth-child(6) {
    animation-delay: -5s;
}

li:nth-child(7) {
    animation-delay: -4s;
}

li:nth-child(8) {
    animation-delay: -3s;
}

li:nth-child(9) {
    animation-delay: -2s;
}

li:nth-child(10) {
    animation-delay: -1s;
}

@keyframes test {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}