How can I do an animation where there a circle that is not visible, then a circle paints clockwise like below until the whole circle is visible? The code below works great for 0% – 25% as it smoothly paints it, but the remaining 25% increments does not paint but just appears every second.

This is my current code:

@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;
}