css - 如何使用 CSS 控制 SVG 线条动画的速度

Question

抱歉标题不好，不知道如何解释。我开始摆弄 SVG 和动画 CSS，因为它真的很酷，我遇到了一个我似乎无法克服的问题。这是我正在使用的 CSS:

 #Line {
    -webkit-animation: line-animation alternate 4s infinite;
 }      
 @-webkit-keyframes line-animation { 
        0%      {stroke-dasharray: 37%,112%;}
        100%    {stroke-dasharray: 1%,54%;stroke-dashoffset: 74%;}
 }

到目前为止我得到的代码笔(仅限 CHROME):http://codepen.io/anon/pen/JYvmEL

它从 3 条小线开始，然后慢慢变成 1 条孤行。当长线停止时，它会慢慢变回 3 条小线，但当它改变方向时，速度非常快。交替变慢时如何控制速度？

这是我正在努力完成的低质量 Gif:https://gyazo.com/575f816bd9ac090f1e58f039a05ee07a

查看外线，您可以看到该线如何平滑地爬到末端，然后慢慢变回来。

如果这没有任何意义，请告诉我，以便我重写它，哈哈。

Answer 1

在 keyframes 声明中使用三个补间点，并删除 alternate 关键字。原始关键帧声明的非替代版本为:

@-webkit-keyframes line-animation { 
    0%     { -- start state -- }
    50%    { -- end state -- }
    100%   { -- start state -- }
}

现在您已经完成了，您应该能够通过更改中间关键帧的时间位置来控制前进和后退方向的相对速度。所以要使反向比正向长，减少50%的值。

@-webkit-keyframes line-animation { 
    0%     { -- start state -- }
    30%    { -- end state -- }
    100%   { -- start state -- }
}

请注意，您还需要至少将计时值加倍(至 8s 或更多)以保持与原始步速相同。