Установить свойство keyframe для svg

Question

Я анимировал SVG, и я хочу использовать ключевой кадр для установки скорости, но я не могу достичь того, чего хочу. Я хочу, чтобы линия прошла быстро, а затем текст был менее быстрым. Но я действительно не понимаю, как это работает.

Jsfiddle для лучшего объяснения.

<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

Вы можете попытаться уточнить, что вы пытаетесь достичь?

Если вы хотите, чтобы линия замедлялась в конце, чтобы записать буквы медленнее, вы просто выделите больше времени для завершения анимации примерно с stroke-dashoffset, перейдя от 0-2000 в начале 5 % анимации, а затем оставляя остальное в течение оставшегося времени, как это:

@keyframes dash { 
    0% { 
     stroke-dashoffset: 0; 
     transition: 'stroke-dashoffset'; 
    } 
    5% { 
     stroke-dashoffset: 2000; 
     transition: 'stroke-dashoffset'; 
    } 
    100% { 
     stroke-dashoffset: 3800; 
     transition: 'stroke-dashoffset'; 
    } 
} 

Но я не совсем уверен, я правильно понял, так что я не уверен, что это то, что вы «пытаюсь добиться.