虚线边框CSS3渐变颜色动画

Question

我有一个带有虚线边框的圆形元素。我要实现的是该边框的动画，其中有一个“头”（橙色），它进入圆规，并在其自身之后留下一个“尾巴”，在该“尾巴”中它逐渐变为灰色，然后逐渐消失为透明。边框本身必须保持静止（虚线不动，只改变其颜色）。动画必须循环播放。最好使用CSS3，但是如果无法使用纯CSS解决方案，那么JS也可以工作。

您可以从所附的图片中获得灵感，唯一的是灰色部分必须在其末端逐渐淡出。

到目前为止，我已经尝试适应了我发现的不同的微调器加载器动画，但是没有成功。

也尝试自己写一些东西，但是由于缺乏CSS3动画的经验而没有太多用处。在此示例中，颜色仅是脉动的，没有圆的“波”的理想效果。

@keyframes grey-to-orange
  0%
    border-color: transparent
  50%
    border-color: grey
  100%
    border-color: orange

.bordered
  width: 210px
  height: 210px
  border: 3.5px dashed grey
  border-radius: 100%
  animation-name: grey-to-orange
  animation-duration: 4s
  animation-direction: alternate-reverse
  animation-iteration-count: infinite