Как сделать плавную анимацию вращения пунктирной границы, например «марширующих муравьев»

Я работаю над анимацией CSS, которая использует «винтики и цепочки», но не может создать «плавную» последовательность вращения границ.

Вы можете увидеть в этомиграть на скрипке Как (в настоящее время) я использую псевдоэлемент для создания эффекта «вращения». Это делается путем «переключения» между пунктирной белой и красной пунктирной рамкой, создавая впечатление, что «граница вращается».

Что я имею

#one{
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */

}
#two{
  -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateAntiClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateAntiClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateAntiClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */

 position:absolute;
    top:30px;
    left:42px;
    width:80px;
}

@-webkit-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-moz-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-o-keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes rotateAntiClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/******************************************************************************/

.chain{
    height:70px;
    width:80%;
    border:5px dashed gold;
    border-radius:30px;
    position:absolute;
    top:30px;
    left:40px;
          -webkit-animation: switchGoldBlackBorder 0.8s infinite; /* Safari 4+ */
  -moz-animation:    switchGoldBlackBorder 0.8s infinite; /* Fx 5+ */
  -o-animation:      switchGoldBlackBorder 0.8s infinite; /* Opera 12+ */
  animation:         switchGoldBlackBorder 0.8s infinite; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes switchBlackGoldBorder {
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@-moz-keyframes switchBlackGoldBorder{
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@-o-keyframes switchBlackGoldBorder {
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}
@keyframes switchBlackGoldBorder {  
    0%   { border: 5px dashed transparent; }
    49%   { border: 5px dashed transparent; }
    50%   { border: 5px dashed gold; }
    100%   { border: 5px dashed gold; }
}



.chain:after{
    content:"";
    position:absolute;
    height:70px;
    border-radius:30px;
    width:100%;
    top:-5px;
    left:-5px;
    border:5px solid gold;
    z-index:-1;
          -webkit-animation: switchBlackGoldBorder 0.8s infinite; /* Safari 4+ */
  -moz-animation:    switchBlackGoldBorder 0.8s infinite; /* Fx 5+ */
  -o-animation:      switchBlackGoldBorder 0.8s infinite; /* Opera 12+ */
  animation:         switchBlackGoldBorder 0.8s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes switchGoldBlackBorder {
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@-moz-keyframes switchGoldBlackBorder{
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@-o-keyframes switchGoldBlackBorder {
  0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
@keyframes switchGoldBlackBorder {  
    0%   { border: 5px solid gold; }
    49%   { border: 5px solid gold; }
    50%   { border: 5px solid white; }
    100%   { border: 5px solid white; }
}
<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <defs>
        <circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/>
        <path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/>
    </defs>    
    <use xlink:href="#c"/>
    <use xlink:href="#d"/>
    <use xlink:href="#d" transform="rotate(45, 50, 50)"/>
</svg>

<svg id="two" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <use xlink:href="#one"/>    
</svg>
<div class="chain"></div>

Итак, в нижней части фрагмента вы можете увидеть, как я сгенерировал «эффект вращающейся цепи» с помощью ключевых кадров.

Что бы я хотел

Мое общее желание было бы создать что-то вроде:

Подумайте о поперечном сечении конвейерной ленты и о том, как «шестерни на конце приводят в движение ленту». Я пытаюсь воспроизвести это. (то есть золотые биты пунктирной границы должны находиться внутри впадин механизма и «притягиваться» им)

#one{
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */
border:5px dashed gold;
  border-radius:50%;
}

@-webkit-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <defs>
        <circl,e id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/>
        <path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/>
    </defs>    
    <use xlink:href="#c"/>
    <use xlink:href="#d"/>
    <use xlink:href="#d" transform="rotate(45, 50, 50)"/>
</svg>

но с золотыми черточками, чтобы поместиться в желоба механизма, а также 80% ширины экрана (если это имеет смысл).

В конце я хотел бы создать что-то вроде этого изображения:

Посмотрите, как я хочу, чтобы цепь «вращалась»?

Мои текущие проблемы

Поскольку анимация «взломана» с помощью псевдоэлемента, я обнаружил, что довольно сложно синхронизировать вращение этой «цепочки».Я все еще изучаю анимацию ключевых кадров, поэтому я уверен, что это не лучший метод для этогоОпять же, svg - это новая концепция для меня, так что терпите мое нежелание ее использовать (поэтому я и использую css для «цепочки»)В конце концов, я хочу «сделать так, чтобы» казалось, что шестеренка вращает цепь, но сейчас они выглядят как полностью (и плохо выполненные) отдельные элементы анимации.

Ответы на вопрос(1)

Ваш ответ на вопрос