svg两端交汇动效

HTML:

<svg class="electricity" viewBox="0 20 60 20"  width="100%" height="200">
    <defs>
        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> 
            <stop offset="0%" stop-color="#05a"/>
            <stop offset="50%" stop-color="#05a"/>
            <stop offset="50%" stop-color="#a05"/> 
            <stop offset="100%" stop-color="#a05"/>
        </linearGradient>
    </defs>
    <polyline class="my-path" style="stroke:url(#linear)" points="0,31.079 2.5,31.079 3.5,33.079 6.5,25.079 7.5,31.079 
    8.5,31.079 11.5,40.079 11.5,31.079 14.5,31.079 17.5,22.079 19.5,31.079 22.5,31.079 24.5,35.079 27.5,22.079 28.5,28.079 
    31.5,28.079 34.5,38.079 35.5,28.079 39.5,28.079 42.5,31.079 43.5,20.079 45.5,29.079 51.5,29.079 52.5,26.079 54.5,29.079 
    60,29.079 "/>
</svg>

LESS:

svg.electricity {
    display: block;
    width: 100%;
    @-webkit-keyframes dash {
        to {
            stroke-dasharray: 80 0;
        }
    }
    .my-path {
        fill: none;
        stroke: black;
        stroke-width: 1px;
        stroke-linecap: round;
        stroke-dasharray: 0 160;/* stroke-dasharray在SVG中表示描边是虚线，两个值，第一个是实线的宽度，第二个是实线之间的间距。 */
        animation: dash 5s linear forwards;
    }
}