Chaining Multiple CSS Animations on SVG in Infinite Loop - css

Question

I have two animated svg's, with two separate animations. I would like to chain them (and maybe more in the future) — infinite on one element. I would prefer CSS only.
I have tried to chain them like this question Chaining Multiple CSS Animations, but it seems that it is harder with the infinite loop — or there might be something wrong with my #keyframes (too simple).
The code can be found here: https://codepen.io/Miet/pen/bWWONo
The 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>
The 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;
}
}