css - 线条动画 SVG，动画不起作用

Question

我一直在学习教程，但我无法弄清楚为什么线条动画不起作用，破折号偏移和破折号数组似乎有效但动画无效。

这是 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

对于google chrome等基于webkit的浏览器可以使用-webkit来解决这个问题:

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