Set keyframe property for svg - css

Question

I've animated a SVG and I want to use keyframe to set the speed but I'm not able to achieve what I want. I want that the line go fast and then the text to be less fast. But I don't really understand how it's work.
Here is a Jsfiddle for better explanation.
<svg class="svg-path" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-195.9 282.3 995.9 35.5" enable-background="new -195.9 282.3 995.9 35.5" xml:space="preserve">
<path class="path" stroke-width="1" fill="none" stroke="#000000" d="M-195.9,316.9c0.1,0,853.9,0,854.2,0c0.6,0,2.5,0,2.9,0c0.8,0,1.4,0,1.9,0c1,0,1.9,0,2.5,0
c0.9,0,1.2,0,2,0c0.9,0,0.8,0,1.9,0c1.5,0,1.9-0.2,3-0.6c1-0.4,1.9-1,2.7-1.7c0.7-0.7,1.3-1.5,1.7-2.5c0.4-1,0.6-3,0.6-4.1
c0-1.2-0.3-2.1-0.7-2.9c-0.4-0.8-1-1.4-1.9-1.9c-0.8-0.5-1.7-1-2.7-1.3s-2.1-0.7-3.1-1c-1.1-0.3-2.1-0.7-3.1-1.1
c-1-0.4-1.9-0.9-2.7-1.6c-0.8-0.7-1.4-1.4-1.9-2.4c-0.5-1-0.7-2.2-0.7-3.6c0-1.1,0-1.5,0.5-2.5c0.4-1,1.4-2.1,2-2.7
c0.8-0.8,1.9-1.2,3.1-1.7c1.2-0.5,2.6-0.7,4.2-0.7c1.7,0,4.5,0,5.9,0c1.7,0,5.2,0,8.4,0v32.8h10.4l0-32.9l15.5,25.7l15-25.6l0,32.9
h20.3c0,0,15.1,0,15.1-17.9c0-16.8-14.8-16.2-14.8-16.2s-14.2-0.6-14.2,16.2c0,18,13.2,17.9,14.2,18c0,0,20.9,0,21.9,0v-32l24.4,32
v-33.5h7.6"/>
</svg>
CSS
svg.svg-path {
position: absolute;
top:25px;
left: 0px;
width: 100%;
height: auto;
}
svg.svg-path path {
stroke-dasharray: 3800;
animation: dash 3.5s linear reverse;
}
#keyframes dash {
0% {
stroke-dashoffset: 0;
transition: 'stroke-dashoffset';
}
50% {
stroke-dashoffset: 2000;
transition: 'stroke-dashoffset';
}
100% {
stroke-dashoffset: 3800;
transition: 'stroke-dashoffset';
}
}

Answer 1

Can you try to elaborate on, what you're trying to achieve?
If you want the line to slow down in the end to write out the letters in a slower fashion, you would just allocate more time to complete the animation from about stroke-dashoffset by making it go from 0-2000 in the beginning 5% of the animation, and then reserving the rest of it for the remainder of the time, like this:
#keyframes dash {
0% {
stroke-dashoffset: 0;
transition: 'stroke-dashoffset';
}
5% {
stroke-dashoffset: 2000;
transition: 'stroke-dashoffset';
}
100% {
stroke-dashoffset: 3800;
transition: 'stroke-dashoffset';
}
}
But I'm not really sure I understood correctly, so I'm not sure this is what you're trying to achieve.