title: How to make a smooth dashed border rotation animation like 'marching ants'
body: <p>I'm working on a css animation that uses 'cogs and chains', but am unable to create a 'smooth' border rotation sequence.</p>
  
  <p>You can see in this <a href="http://jsfiddle.net/5n56dn5b/14/">fiddle</a> How (currently) I'm using a pseudo element to generate a 'rotation' effect. This is done by 'switching' between a dashed white and dashed gold colored border, making it seem like the 'border is rotating'.</p>
  
  <p><strong>What I have</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100"&gt;
      &lt;defs&gt;
          &lt;circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/&gt;
          &lt;path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/&gt;
      &lt;/defs&gt;    
      &lt;use xlink:href="#c"/&gt;
      &lt;use xlink:href="#d"/&gt;
      &lt;use xlink:href="#d" transform="rotate(45, 50, 50)"/&gt;
  &lt;/svg&gt;
  
  &lt;svg id="two" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100"&gt;
      &lt;use xlink:href="#one"/&gt;    
  &lt;/svg&gt;
  &lt;div class="chain"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So, the lower section of the snippet, you can see how I've generated the 'rotating chain effect' through using keyframes.</p>
  
  <hr>
  
  <p><strong>What I would like</strong></p>
  
  <p>My overall wish would be to generate something like:</p>
  
  <p><em>Think of a cross section of a conveyor belt, and how the 'gears at the end drive the belt'. I'm trying to reproduce that. (i.e. the dashed border's gold bits should be within the troughs of the gear, and 'be pulled' by it)</em>
  <div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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); }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100"&gt;
      &lt;defs&gt;
          &lt;circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/&gt;
          &lt;path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/&gt;
      &lt;/defs&gt;    
      &lt;use xlink:href="#c"/&gt;
      &lt;use xlink:href="#d"/&gt;
      &lt;use xlink:href="#d" transform="rotate(45, 50, 50)"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but with the gold dashes to fit within the gear's troughs, as well as being 80% width of the screen (if that makes sense).</p>
  
  <p>In the end, I would like to generate something like this image portrays:</p>
  
  <p><img src="https://i.stack.imgur.com/j0mzc.png" alt="enter image description here"></p>
  
  <p>See how i want the chain to 'rotate'?</p>
  
  <hr>
  
  <p><strong>My Current Issues</strong></p>
  
  <ul>
  <li>Since the animation is 'hacked' via the use of a pseudo element, I've found it quite hard to actually sync the rotation of this 'chain'.</li>
  <li>I'm still learning keyframe animation, so I'm sure that isn't the best method for this</li>
  <li>Again, svg is a new concept for me, so bear with my reluctance to use it (hence why I'm using css for the 'chain')</li>
  <li>In the end, I want to 'make it look like' the gear is turning the chain, but right now they look like completely (and badly done) separate element animations</li>
  </ul>
  
  <hr>