How to make a smooth dashed border rotation animation like 'marching ants'

Cog and chain animation :

I totaly refactored the code (CSS and HTML), it is now :

shorter (especialy the css)
simpler
more realistic: corrected the synchronisation issue bteween the chain and the cogs and added a missing cog on the right because your chain seemed to be floating in the air :

DEMO

The approach is the same, animating the rotation angle for the cogs and dash-offset for the chain path. I tweaked the timing between both animations to make it look as if the cogs are pulling the chain.

Browser support :

As IE doesn't support the svg animate element I also made this version of the animation with the snap.svg library that also supports IE9 and over (tested in IE9 with crossbrowsertesting).

DEMO with IE support

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%;
}

<script src="http://thisisa.simple-url.com/js/snapsvg.js"></script>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">
    <defs>
        <circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4" />
        <path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16" />
        <g id="cog_acw">
            <use xlink:href="#c" /><use xlink:href="#d" />
            <use xlink:href="#d" transform="rotate(45 20 20)" />
        </g>  
        <g id="cog_cw">
            <use xlink:href="#c" /><use xlink:href="#d" />
            <use xlink:href="#d" transform="rotate(45 20 20)" />
        </g>  
    </defs>
    <path id="chain" stroke-width="1" stroke="#000" fill="transparent" 
    d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89.4 26.5 89.4 13.5 80.8 13.5z" />
    <use  xlink:href="#cog_acw" />
    <use  transform="translate(60.5 0), rotate(19,20,20)" xlink:href="#cog_acw" />
    <use  transform="translate(-4.5 -4.5),scale(.8), rotate(0,20,20)" xlink:href="#cog_cw" />    
</svg>

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 id="one" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">
  <defs>
    <circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4"/>
    <path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16"/>
    <g id="cog">
      <use xlink:href="#c"/>
      <use xlink:href="#d"/>
      <use xlink:href="#d" transform="rotate(45 20 20)"/>
    </g>
  </defs>
  <g transform="translate(0,-7), scale(0.8), rotate(22.5 8 8)">
    <use xlink:href="#cog">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="-22.5 20 20" to="337.5 20 20" dur="8s" repeatCount="indefinite"/>
    </use>
  </g>
  <path id="chain_st" stroke-width="1" stroke="#000" fill="transparent" stroke-dasharray="2.6 2.45" d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89 26.5 89 13.5 80.8 13.5z" />
  <use class="rot" xlink:href="#cog">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate"from="22.5 20 20" to="-337.5 20 20" dur="8s" repeatCount="indefinite"/>
  </use>
  <g transform="translate(60.3 0)">
    <use class="" xlink:href="#cog">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="22.5 20 20" to="-337.5 20 20" dur="8s" repeatCount="indefinite"/>
    </use>
  </g>
</svg>

Original answer :

You could use an other svg dashed path and animate the dash-offset property with a keyframe animation.

This can and should be simplified/tweaked for a "real world" use :

all elements can be contained into one <svg> tag (this would make it simpler and both cogs + chain could resize together)
The sync between the chain and the cog isn't perfect and speed/size of chain needs to be tweaked.

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

<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>
<svg id="chain" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 70 10">
  <path class="chain_st" stroke-width="0.5" stroke="#000" fill="transparent" d="M60 1 Q65 1 65 5 Q65 9 60 9 H6 Q1 9 1 5 Q1 1 6 1z" />
</svg>

How about this approach? I'm using SVG for both the gears and the conveyor. The gears rotate as per your example, but I am using stroke-dasharray and animating stroke-dash-offset to make the conveyor belt move.

It took a bit of fiddling to get the conveyor length and dash timing right, which you would need to tweak again if you change the gear size or conveyor length.

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

}
#two{
  -webkit-animation: rotateAntiClockwiseAnimation 4s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateAntiClockwiseAnimation 4s linear infinite; /* Fx 5+ */
  -o-animation:      rotateAntiClockwiseAnimation 4s linear infinite; /* Opera 12+ */
  animation:         rotateAntiClockwiseAnimation 4s 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
{
  -webkit-animation: conveyor 0.5s linear infinite; /* Safari 4+ */
  -moz-animation:    conveyor 0.5s linear infinite; /* Fx 5+ */
  -o-animation:      conveyor 0.5s linear infinite; /* Opera 12+ */
  animation:         conveyor 0.5s linear infinite; /* IE 10+, Fx 29+ */
}


@-webkit-keyframes conveyor {
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}
@-moz-keyframes conveyor {
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}
@-o-keyframes conveyor {
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}
@keyframes conveyor {  
    0%   { stroke-dashoffset: -9; }
    100% { stroke-dashoffset: 20.06; }
}

<svg width="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 100">
    <defs>
        <circle id="c" cx="0" cy="0" r="30" stroke="#808080" fill="none" stroke-width="25"/>
        <path id="d" stroke="#808080" stroke-width="16" d="M0,-50 v15 M0,50 v-15 M-50,0 h15 M50,0 h-15"/>

        <g id="gear">
          <use xlink:href="#c"/>
          <use xlink:href="#d"/>
          <use xlink:href="#d" transform="rotate(45)"/>
        </g>
    </defs>
  
  <rect id="chain2"
          x="43" y="23" width="598" height="74" rx="37"
          stroke="gold" stroke-width="2" fill="none"/>

    <g transform="translate(27,27) scale(0.5)">
      <g id="one">
        <use xlink:href="#gear"/>
      </g>
    </g>

    <g transform="translate(80,60) scale(0.8)">
      <g id="two">
        <use xlink:href="#gear"/>
      </g>
    </g>
  
  <rect id="chain"
          x="43" y="23" width="598" height="74" rx="37"
          stroke="gold" stroke-width="5" fill="none"
          stroke-dasharray="14 15.06"/>
</svg>

Note: I have remade the whole animation in box-shadow, because using dashed borders doesn't have consistent output on all the browsers.

Working

.. and Works cross-browser.
FF 5+, GC 4+, IE9+, Safari 4+, Opera 12.1+

You can try this using box-shadow :

To make the gears teeth, use box-shadow with negative spread radius. The size of my gear was 50px for example, so to get round box-shadow with d=8px, I used -46px as spread radius.
I positioned the teeth using coordinate geo, and only used 8 teeth to simplify.
Now for the straight conveyor, we need to know the distance between the teeth. We get that by the following :
2*pi*(gear radius) / no. of teeth = (pi * r) / 4
Mine = (55 * 3.1415) / 4 = 43 (approx.)
I took the radius as 55 because the teeth have 4px radius and are lying 1px away from gear circumference.
For aligning the top and bottom straight conveyors, they need to be translated by any multiple of their distance. For my gear, I translate them by 43px.

The Scaffolding

FIDDLE

body {
    background: rgba(25,80,175, 0.4);
}
.rect {
    height: 116px;
    width: 401px;
    border-radius: 58px;
    position: relative;
    overflow: hidden;
}

.rect:before, .rect:after {
    content: '';
    position: absolute;
    left: 46px; /*50-half width*/
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 43px 0 0 0 white, 86px 0 0 0 white, 129px 0 0 0 white, 172px 0 0 0 white, 215px 0 0 0 white, 258px 0 0 0 white, 301px 0 0 0 white;
    -webkit-animation: apple 0.3s linear infinite;
    -moz-animation: apple 0.3s linear infinite;
    animation: apple 0.3s linear infinite;
}
.rect:before {
    top: 0px;
}
.rect:after {
    bottom: 0px;
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}
@-webkit-keyframes apple {
    0% {-webkit-transform: translatex(0px);}
    100% {-webkit-transform: translateX(-43px);}
}
@-moz-keyframes apple {
    0% {-moz-transform: translatex(0px);}
    100% {-moz-transform: translateX(-43px);}
}
@keyframes apple {
    0% {transform: translatex(0px);}
    100% {transform: translateX(-43px);}
}
.left, .right {
    content: '';
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-color: #222;
    box-shadow: 0 55px 0 -46px white, 55px 0 0 -46px white, 0 -55px 0 -46px white, -55px 0 0 -46px white,
        39px 39px 0 -46px white, -39px -39px 0 -46px white, 39px -39px 0 -46px white, -39px 39px 0 -46px white;
    -webkit-animation: mango 2.4s linear infinite;
    -moz-animation: mango 2.4s linear infinite;
    animation: mango 2.4s linear infinite;
}
.left {
    top: -108px;
    left: 0px;
}
.right {
    top: -208px;
    left: 301px;
}
@-webkit-keyframes mango {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes mango {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@keyframes mango {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}

<div class="rect"></div>
<div class="left"></div>
<div class="right"></div>

Final version

... with gears. The chain currently is ~~dotted~~ dashed!

FIDDLE

body {
    background-color: white;
}
.rect {
    height: 120px;
    width: 401px;
    border-radius: 58px;
    position: relative;
}

.rect:before, .rect:after {
    content: '';
    position: absolute;
    left: 40px; /*50-half width*/
    height: 10px;
    width: 20px;
    background: transparent;
    box-shadow: 43px 0 0 0 gold, 86px 0 0 0 gold, 129px 0 0 0 gold, 172px 0 0 0 gold, 215px 0 0 0 gold, 258px 0 0 0 gold, 301px 0 0 0 gold, 344px 0 0 0 gold; /*keep adding 43 to x-axis*/
    -webkit-animation: apple 0.6s linear infinite;
    -moz-animation: apple 0.6s linear infinite;
    animation: apple 0.6s linear infinite;
    overflow: hidden;
}
.rect:before {
    top: 0px;
}
.rect:after {
    bottom: 0px;
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}
@-webkit-keyframes apple {
    0% {-webkit-transform: translatex(0px);}
    100% {-webkit-transform: translateX(-43px);}
}
@-moz-keyframes apple {
    0% {-moz-transform: translatex(0px);}
    100% {-moz-transform: translateX(-43px);}
}
@keyframes apple {
    0% {transform: translatex(0px);}
    100% {transform: translateX(-43px);}
}
.left, .right {
    content: '';
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    -webkit-animation: mango 4.8s linear infinite;
    -moz-animation: mango 4.8s linear infinite;
    animation: mango 4.8s linear infinite;
}
.left {
    top: -110px;
    left: 0px;
}
.right {
    top: -210px;
    left: 344px;
}
.left:before, .left:after, .right:before, .right:after {
    height: 20px;
    width: 20px;
    content: '';
    position: absolute;
    background-color: gold;
}
.left:before, .right:before {
    box-shadow: 50px 50px 0 0 gold, -50px 50px 0 0 gold, 0 100px 0 0 gold;
    top: -10px;
    left: 40px;
}
.left:after, .right:after {
    transform: rotate(45deg);
    top: 5px;
    left: 76px;
    box-shadow: 0px 100px 0 0 gold, 50px 50px 0 0 gold, -50px 50px 0 0 gold;
}
@-webkit-keyframes mango {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes mango {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@keyframes mango {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
.cover {
    height: 104px;
    width: 446px;
    border-radius: 50px;
    position: relative;
    background: rgba(255,255,255,1);
    top: -312px;
    left; -2px;
    
}
.gear, .gear2 {
    height: 100px;
    width: 100px;
    background: dimgray;
    border-radius: 50%;
    position: relative;
    -webkit-animation: gear 4.8s linear infinite;
    -moz-animation: gear 4.8s linear infinite;
    animation: gear 4.8s linear infinite;
}
.gear {
    top: -414px;
  
}
.gear2 {
    top: -514px;
    left: 345px;
}
.gear:before, .gear:after, .gear2:before, .gear2:after {
    height: 20px;
    width: 20px;
    content: '';
    position: absolute;
    background-color: dimgray;
    
}
.gear:before, .gear2:before {
    box-shadow: 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray, 0 100px 0 0 dimgray;
    top: -10px;
    left: 40px;
}
.gear:after, .gear2:after {
    transform: rotate(45deg);
    top: 5px;
    left: 76px;
    box-shadow: 0px 100px 0 0 dimgray, 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray;
}
@-webkit-keyframes gear {
    0% {-webkit-transform: rotate(22.5deg);}
    100% {-webkit-transform: rotate(-337.5deg);}
}
@-moz-keyframes gear {
    0% {-moz-transform: rotate(22.5deg);}
    100% {-moz-transform: rotate(-337.5deg);}
}
@keyframes gear {
    0% {transform: rotate(22.5deg);}
    100% {transform: rotate(-337.5deg);}
}

<div class="rect"></div>
<div class="left"></div>
<div class="right"></div>
<div class="cover"></div>
<div class="gear"></div>
<div class="gear2"></div>

Final version (Rounded cog-teeth)

.rect {
    height: 120px;
    width: 401px;
    border-radius: 58px;
    position: relative;
}
.rect:before, .rect:after {
    content: '';
    position: absolute;
    left: 40px; /*50-half width*/
    height: 10px;
    width: 20px;
    box-shadow: 43px 0 0 0 gold, 86px 0 0 0 gold, 129px 0 0 0 gold, 172px 0 0 0 gold, 215px 0 0 0 gold, 258px 0 0 0 gold, 301px 0 0 0 gold, 344px 0 0 0 gold; /*keep adding 43 to x-axis*/
    -webkit-animation: translate 0.6s linear infinite;
    -moz-animation: translate 0.6s linear infinite;
    animation: translate 0.6s linear infinite;
    overflow: hidden;
}
.rect:before {top: 0px;}
.rect:after {
    bottom: 0px;
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}
@-webkit-keyframes translate {
    0% {-webkit-transform: translatex(0px);}
    100% {-webkit-transform: translateX(-43px);}
}
@-moz-keyframes translate {
    0% {-moz-transform: translatex(0px);}
    100% {-moz-transform: translateX(-43px);}
}
@keyframes translate {
    0% {transform: translatex(0px);}
    100% {transform: translateX(-43px);}
}
.left, .right {
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    -webkit-animation: rotate 4.8s linear infinite;
    -moz-animation: rotate 4.8s linear infinite;
    animation: rotate 4.8s linear infinite;
}
.left {
    top: -110px; left: 0px;
}
.right {
    top: -210px; left: 344px;
}
.left:before, .left:after, .right:before, .right:after {
    height: 20px;
    width: 20px;
    content: '';
    position: absolute;
    background: gold;
}
.left:before, .right:before {
    box-shadow: 50px 50px 0 0 gold, -50px 50px 0 0 gold, 0 100px 0 0 gold;
    top: -10px;
    left: 40px;
}
.left:after, .right:after {
    transform: rotate(45deg);
    top: 5px;
    left: 76px;
    box-shadow: 0px 100px 0 0 gold, 50px 50px 0 0 gold, -50px 50px 0 0 gold;
}
@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes rotate {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
.cover {
    height: 104px;
    width: 446px;
    border-radius: 50px;
    position: relative;
    background: rgba(255,255,255,1);
    top: -312px;
    left; -2px;
}
.gear, .gear2, .gear3 {
    height: 100px;
    width: 100px;
    background: transparent;
    box-shadow: inset 0 0 0px 35px dimgray, inset 0 0 0px 40px #444;
    border-radius: 50%;
    position: relative;
    -webkit-animation: rotate 4.8s linear infinite;
    -moz-animation: rotate 4.8s linear infinite;
    animation: rotate 4.8s linear infinite;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.gear {top: -414px;}
.gear2 {top: -514px; left: 345px;}
.gear:before, .gear:after, .gear2:before, .gear2:after,  .gear3:before, .gear3:after {
    height: 20px;
    width: 20px;
    content: '';
    border-radius: 20%;
    position: absolute;
    background: dimgray;
}
.gear:before, .gear2:before, .gear3:before {
    box-shadow: 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray, 0 100px 0 0 dimgray;
    top: -10px; left: 40px;
}
.gear:after, .gear2:after, .gear3:after {
    transform: rotate(45deg);
    top: 5px; left: 76px;
    box-shadow: 0px 100px 0 0 dimgray, 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray;
}
.gear3 {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
    top: -504px;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}

<div class="rect"></div>
<div class="left"></div>
<div class="right"></div>
<div class="cover"></div>
<div class="gear"></div>
<div class="gear2"></div>
<div class="gear3"></div>

FIDDLE - ROUNDED TEETH

NOTE : To increase the speed of animation, you simply have to decrease the animation duration of each element proportionally.

Fiddle (fast)