在无限循环中链接SVG上的多个CSS动画

Question

我有两个动画svg，有两个独立的动画。我想链接它们（将来可能更多） - 在一个元素上无限。我更喜欢CSS。

我试图将它们链接到这个问题Chaining Multiple CSS Animations，但似乎无限循环更难 - 或者我的@keyframes可能有问题（太简单了）。

可以在此处找到代码：https://codepen.io/Miet/pen/bWWONo

HTML：

<?xml version="1.0" encoding="utf-8"?>
<div class="svg-container">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 35 22" style="enable-background:new 0 0 32.4 21.7;" xml:space="preserve">
        <g>
            <path class="st0" d="M2.5,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C-0.1,12.1,1.1,13.2,2.5,13.2"
                />
            <path class="st0" d="M29.9,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
                C27.3,12.1,28.4,13.2,29.9,13.2"/>
            <path class="st0" d="M8,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C5.4,6.2,6.5,7.2,8,7.2"/>
            <path class="st0" d="M24.4,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C21.8,6.2,23,7.2,24.4,7.2"/>
            <path class="st0" d="M16.2,21.6c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
                C13.6,20.5,14.8,21.6,16.2,21.6"/>
            <path class="st0" d="M16.2,4.9c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C13.6,3.8,14.8,4.9,16.2,4.9"/>
        </g>

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10.853" x2="32.3588" y2="10.853">
            <stop  offset="0.2597" style="stop-color:#EE3251"/>
            <stop  offset="1" style="stop-color:#F47529"/>
        </linearGradient>

        <polyline class="st1" points="16.2,2.5 24.4,4.9 2.5,10.9 8.1,4.8 16.2,19.2 30.1,10.8 "/>
    </svg>
</div>

<div class="svg-container">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 35 22" style="enable-background:new 0 0 32.4 21.7;" xml:space="preserve">
        <g>
            <path class="st0" d="M2.5,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C-0.1,12.1,1.1,13.2,2.5,13.2"
                />
            <path class="st0" d="M29.9,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
                C27.3,12.1,28.4,13.2,29.9,13.2"/>
            <path class="st0" d="M8,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C5.4,6.2,6.5,7.2,8,7.2"/>
            <path class="st0" d="M24.4,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C21.8,6.2,23,7.2,24.4,7.2"/>
            <path class="st0" d="M16.2,21.6c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
                C13.6,20.5,14.8,21.6,16.2,21.6"/>
            <path class="st0" d="M16.2,4.9c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C13.6,3.8,14.8,4.9,16.2,4.9"/>
        </g>

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10.853" x2="32.3588" y2="10.853">
            <stop  offset="0.2597" style="stop-color:#EE3251"/>
            <stop  offset="1" style="stop-color:#F47529"/>
        </linearGradient>

        <polyline class="st2" points="16.2,2.5 24.4,4.9 2.5,10.9 8.1,4.8 16.2,19.2 30.1,10.8 "/>
    </svg>
</div>

CSS：

    svg {
        width: 20em;
        display: block;
        margin: 5em auto;
        padding: 1rem;
    }

    .svg-container {
        width: 49%;
        display: inline-block;
        min-width: 21em;
    }


    g {
        cursor: pointer;
    }

    .st0 {
        fill:#EE3251;
    }

    .st1,
    .st2 {
        stroke-dasharray: 60;
        fill: none;
        stroke: url(#SVGID_1_);
        stroke-width: 5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
    }

    .st1 {
        animation: dash 4s infinite ease-in-out alternate;
    }

    .st2 {
        animation: dashLong 2500ms infinite linear;
    }

    @keyframes dash {
        from {
            stroke-dashoffset: 200;
        }
    }

    @keyframes dashLong {
        from {
            stroke-dashoffset: 120;
        }
    }