Как сделать плавную пунктированную анимацию c поворотом границы, такую как "марширующие муравьи"

1,00
р.
Я работаю над анимацией css, в которой используются зубья шестеренки и цепь, но я не могу создать smooth последовательность вращения границы.
Вы можете видеть в fiddle, как я использую псевдоэлемент для создания эффекта вращения.Это делается путем переключения между пунктирной белой и пунктирной границей золотого цвета, из-за чего кажется, что "граница вращается".
Вот код:


#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 } }


Итак, в нижней части snippet вы можете увидеть, как я создал эффект вращающейся цепочки, используя keyframes.
Что бы я хотел в целом получить
Подумайте о поперечном сечении конвейерной ленты и о том, как шестерни в конце ленты зацепляют её. Я пытаюсь воспроизвести это. То есть впадины пунктирной ленты должны находиться на зубьях шестерни и тянуть её.


#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) } }

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

Перевод вопроса: How to make a smooth dashed border rotation animation like 'marching ants' @jbutler483

Ответ
Анимация цепи и зубьев шестеренки:
Полностью переписал код (CSS и HTML), теперь это:
Короче (особенно CSS) Проще Вид механизма стал более реалистичный: исправил проблему синхронизации между цепочкой и шестеренками и добавил недостающую шестерню справа, потому что ваша цепь, казалось,- парила в воздухе:


svg{width:100% } #chain_st{ -webkit-animation: dash 1s infinite linear -moz-animation: dash 1s infinite linear -o-animation: dash 1s infinite linear animation: dash 1s infinite linear } @-webkit-keyframes dash { to { stroke-dashoffset: -5 } } @-moz-keyframes dash { to { stroke-dashoffset: -5 } } @-o-keyframes dash { to { stroke-dashoffset: -5 } } @keyframes dash { to { stroke-dashoffset: -5 } }

Подход тот же, что и анимация угла поворота для зубцов и смещение штрихов для цепи. Я настроил синхронизацию между двумя анимациями, чтобы она выглядела так, как будто шестерни тянут цепь.
Browser support :
Поскольку IE не поддерживает элемент svg animate, я также сделал эту версию анимации с библиотекой snap.svg, которая также поддерживает IE9 и более (протестирована в IE9 с crossbrowsertesting).
DEMO с поддержкой IE


var cont = new Snap('#svg'), chain = cont.select('#chain'), cogAcw = cont.select('#cog_acw'), cogCw = cont.select('#cog_cw'), speed = 500 // Lower this number to make the animation faster function infChain(el) { var len = el.getTotalLength() el.attr({"stroke-dasharray": len/62,"stroke-dashoffset": 0}) el.animate({"stroke-dashoffset": -len/31}, speed, mina.linear, infChain.bind(null, el)) } function rotateAcw(el) { el.transform('r22.5,20,20') el.animate({ transform: 'r-22.5,20,20' }, speed, mina.linear, rotateAcw.bind( null, el)) } function rotateCw(el) { el.transform('r0,20,20') el.animate({ transform: 'r45,20,20' }, speed, mina.linear, rotateCw.bind( null, el)) } infChain(chain) rotateAcw(cogAcw) rotateCw(cogCw) svg { width:100% }

Для современных браузеров


svg{width:100% } #chain_st{ -webkit-animation: dash 1s infinite linear -moz-animation: dash 1s infinite linear -o-animation: dash 1s infinite linear animation: dash 1s infinite linear } @-webkit-keyframes dash { to { stroke-dashoffset: -5 } } @-moz-keyframes dash { to { stroke-dashoffset: -5 } } @-o-keyframes dash { to { stroke-dashoffset: -5 } } @keyframes dash { to { stroke-dashoffset: -5 } }

Предложения к коду автора вопроса:
Вы можете использовать другой svg dashed path и анимировать свойство dash-offset с помощью keyframe animation.
Это можно и нужно упростить / настроить для использования в "real world":
Все элементы могут быть помещены в один тэг (это упростит задачу, и оба элемента шестеренка + цепь могут совместно изменять размер) Синхронизация между цепью и зубчатым колесом не идеальна, и скорость / размер цепи необходимо подкорректировать.
Прим. переводчика
Ниже в сниппете отвечающий подправил оригинальный код, который был в вопросе топика


#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 { width: 650px position: absolute top: 24px left: 35px } .chain_st { stroke-dasharray: 1.5 stroke-dashoffset: 10 -webkit-animation: dash 18s infinite linear -moz-animation: dash 18s infinite linear -o-animation: dash 18s infinite linear animation: dash 18s infinite linear } @-webkit-keyframes dash { to { stroke-dashoffset: 100 } } @-moz-keyframes dash { to { stroke-dashoffset: 100 } } @-o-keyframes dash { to { stroke-dashoffset: 100 } } keyframes dash { to { stroke-dashoffset: 100 } }

Перевод ответа: How to make a smooth dashed border rotation animation like 'marching ants' @web-tiki