Графическая анимация CSS - преобразование сплошных линий в пунктирные линии

Я создал анимацию круга, и она отлично работает, однако я пытаюсь перейти от сплошных строк к пунктирным линиям, но мне интересно, как это сделать, может ли кто-нибудь предложить?

Вот как это выглядит прямо сейчас:

#loading {
  width: 50px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}
.outer-shadow, .inner-shadow {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.inner-shadow {
  top: 1px;
  left: 1px;
  width: 48px;
  height: 48px;
  margin-left: 0;
  margin-top: 0;
  border-radius: 100%;
  background-color: #ffffff;
}
.hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 50px, 25px);
  border-radius: 100%;
  background-color: #fff;
}
.fill, .dot span {
  background-color: #f00;
}
.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
  z-index: 1;
  -webkit-animation: left 1s linear;
  -moz-animation: left 1s linear;
  animation: left 1s linear both;
}
@keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(180deg);
}
}
.right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.right .fill {
  z-index: 3;
  -webkit-animation: right 1s linear;
  -moz-animation: right 1s linear;
  animation: right 1s linear both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@keyframes right {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
  margin-left: 8px;
  margin-top: 7px;
}

<div id='loading'>
  <div class='outer-shadow'> </div>
  <div class='inner-shadow'> </div>
  <div class='hold left'>
    <div class='fill'></div>
  </div>
  <div class='hold right'>
    <div class='fill'></div>
  </div>
</div>

Ответ 1

.circle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: 2px dotted transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  position: relative;
  margin: 30px auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    border-right-color: red;
  }
  50% {
    border-bottom-color: red;
  }
  75% {
    border-left-color: red;
  }
  100% {
    border-top-color: red;
    border-left-color: red;
    border-bottom-color: red;
    border-right-color: red;
    transform: rotate(360deg);
  }
}

<div class="circle"></div>

Ответ 2

Вот еще один фрагмент для вашего вопроса. Нет истинного способа перемещения пунктирных линий. Вместо этого я закрываю/раскрываю пунктирный круг ниже другим кругом с белой рамкой. См. Ниже:

#c1 {
  stroke-width: 1px;
  stroke: red;
  fill: transparent;
  stroke-dasharray: 5;
}

#c2 {
  animation: render 1s linear both;
  stroke-width: 5px;
  stroke: white;
  fill: transparent;
  stroke-dasharray: 377;
  stroke-dashoffset: 0;
}

@keyframes render {
  100% {
    stroke-dasharray: 377;
    stroke-dashoffset: -377;
  }
}

<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
    <circle id="c1" cx="120" cy="120" r="60" />
    <circle id="c2" cx="120" cy="120" r="60" />
</svg>

Ответ 3

Если возможно, я бы настоятельно рекомендовал использовать SVG, так как это упростит вашу жизнь.

В приведенном ниже примере я использую stroke-dasharray и stroke-dashoffset для управления границей. stroke-dasharray обозначает длину тире, а stroke-dashoffset означает смещение от начала пунктирной линии.

По умолчанию я назначил stroke-dasharray: 377; и stroke-dashoffset: 377;. Это означает, что он использует 377px длину тире и пробелов между ними, с 377px смещением.

Если вы измените stroke-dashoffset на 0, он будет постепенно рисовать (уменьшать смещение) границу круга. Поскольку длина окружности приблизительно равна 377px (2 x Pi x 60px), она будет создавать круг без тире.

В последнем кадре анимации, как только вы измените stroke-dasharray на меньшие числа, он преобразует свою границу в тире.

circle {
  stroke-width: 1px;
  stroke: red;
  fill: transparent;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
  animation: render 1s linear both;
}

@keyframes render {
  99% {
    stroke-dasharray: 377;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 5; 
    stroke-dashoffset: 0;
  }
}

<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
    <circle cx="80" cy="80" r="60" />
</svg>