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

但我并不确定我是否理解正确，所以我不确定这是你想要实现的目标。

为svg设置keyframe属性

1 个答案: