title: Line animate SVG, animation not working
body: <p>Ive been following tutorials and i cannot figure out why the line animation is not working, the dash offset and dash array seem to be working but the animation is not.</p>
  
  <p>here is the js fiddle : <a href="http://jsfiddle.net/jp2ttb5L/5/" rel="nofollow">http://jsfiddle.net/jp2ttb5L/5/</a></p>
  
  <pre><code>&lt;style&gt;
      .path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 5s linear forwards;
      }
  
      @keyframes dash {
        to {
          stroke-dashoffset: 0;
        }
      }
  &lt;/style&gt;
  
  &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 1440 1080" enable-background="new 0 0 1440 1080" xml:space="preserve"&gt;
  
  &lt;g id="Layer_3"&gt;
      &lt;polygon class="path" fill="none" stroke="#000000" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" points="411.3,540.5 
          76.3,1043 411.3,1043 746.3,1043     "/&gt;
      &lt;polygon class="path" fill="none" stroke="#000000" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" points="746.3,38.5 
          411.3,541 746.3,541 1081.2,541  "/&gt;
      &lt;polygon class="path" fill="none" stroke="#000000" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" points="746.3,1043.5 
          411.3,541 746.3,541 1081.2,541  "/&gt;
      &lt;polygon class="path" fill="none" stroke="#000000" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" points="1081.2,540.5 
          746.3,1043 1081.2,1043 1416.2,1043  "/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>