Линия анимации SVG, анимация не работает

Question

Ive следил за учебниками, и я не могу понять, почему анимация линии не работает, смещение тире и тире массив кажутся работающими, но анимация - нет.

вот JS скрипку: 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; 
     } 
    }