Line animate SVG, animation not working - css

Question

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.
here is the js fiddle : http://jsfiddle.net/jp2ttb5L/5/
<style>
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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">
<g id="Layer_3">
<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 "/>
<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 "/>
<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 "/>
<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 "/>
</g>
</svg>

Answer 1

For google Chrome and other browser webkit based you can use -webkit to solve this issue:
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
-webkit-animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}