爲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'; 
    } 
} 

但我真的不知道我理解正確的，所以我不知道這是你正在努力實現。