title: How can I animate an SVG line, using stroke-dasharray, so that it moves from right to left
body: <p>I have two SVG lines one on top of the other. I have made them both animate. See fiddle:
  <a href="http://jsfiddle.net/pgsLwvb0/1/" rel="nofollow">http://jsfiddle.net/pgsLwvb0/1/</a></p>
  
  <p>The top line works how I want it to but I would like the bottom line to move from right to left instead. What do i need to change in my code to make this work? Is it a CSS change or a HTML change?</p>
  
  <p>This is the code I used:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;svg height="5" width="150"&gt;
      &lt;line id="top" x1="2" y1="3" x2="150" y2="3" /&gt;
  &lt;/svg&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;svg height="5" width="150"&gt;
      &lt;line id="bottom" x1="2" y1="3" x2="150" y2="3" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#top {
      stroke: rgb(112,111,111);
      stroke-width:1;
      stroke-dasharray:150;
      stroke-dashoffset:150;
      -webkit-animation: dash-top 0.5s forwards;
  }
  
  #bottom {
      stroke: rgb(112,111,111);
      stroke-width:1;
      stroke-dasharray:150;
      stroke-dashoffset:150;
      -webkit-animation: dash-bottom 0.5s forwards;
  }
  
  @-webkit-keyframes dash-top {
      to { stroke-dashoffset: 0; }
  }
  
  @-webkit-keyframes dash-bottom {
      to { stroke-dashoffset:0; }
  }
  </code></pre>