Clip-path: как создать круг, рисующий по часовой стрелке? ⇐ CSS

[Anonymous]

Как я могу сделать анимацию, в которой есть невидимый круг, а затем круг рисуется по часовой стрелке, как показано ниже, пока весь круг не станет видимым? Приведенный ниже код отлично работает для диапазона 0–25 %, поскольку он плавно рисует его, но остальные 25 % не рисуют, а просто появляются каждую секунду.


Это мой текущий код:
@keyframes paintRing {
0% {
clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%);
}
25% {
clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%);
}
50% {
clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
75% {
clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%);
}
100% {
clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);
}
}
.gwd-image-1ez7 {
position: absolute;
width: 300px;
height: 300px;
top: -25px;
left: 735px;
transform-origin: 50% 50% 0px;
animation: 3s ease-in-out 0s 1 normal forwards running paintRing;
}


Подробнее здесь: https://stackoverflow.com/questions/785 ... -clockwise