title: Animate dashed SVG line
body: <p>I would like to animate a <strong>dashed line</strong> in a SVG-file. The line should »grow« from 0 length to full length. All the methods I found are not suitable for me.</p>
  
  <p>Does anyone have an idea, how to solve this?</p>
  
  <p>That's the path in my svg file:</p>
  
  <pre><code>&lt;path class="path" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M234.3,119
      c-31-0.7-95,9-128.7,50.8"/&gt;
  </code></pre>
  
  <p>To animate the line as <strong>straight</strong> line i did: </p>
  
  <pre><code>.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear forwards;
  }
  
  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
  </code></pre>
  
  <p>Of course, this is not working, when I want the line to be dashed.
  Is there anybody who has an idea how to solve this?</p>
  
  <p>That's my codepen: <a href="http://codepen.io/anon/pen/WpZNJY" rel="nofollow noreferrer">http://codepen.io/anon/pen/WpZNJY</a></p>
  
  <p>PS: I can't use two paths over each other to hide the path underneath because I'm having a coloured background. </p>