Css 反向SVG线条绘制动画

我正在尝试反转SVG行的动画方式。我需要从左向右画线，但只能从右向左画。我试图改变illustrator中的端点，但这只会导致它从两边都画出来。我该怎么做？您可以在此处看到动画：

这是SVG：

<svg viewBox="0 0 759.7 234.2">
    <path class="phone-line" stroke="#fff" stroke-width="4" stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
    M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
        c-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55" />
  </svg>

---

如您所知，

stroke dasharray

属性创建虚线图案。当该值指定为1400时，表示短划线的长度和短划线之间的间距为1400。也就是说，从0到1400，将出现一条直线，从1400到2800，将出现一个破折号

现在，当您将

stroke dashoffset

从

1400

更改为

0

时，它会从一个方向显示该行。最初偏移量为1400，因此只有短划线可见（无线条）。当偏移设置为0时，破折号向左移动，线（从0到1400）慢慢进入视图

从另一个方向执行此操作的简单方法是将其从

1400

设置为

2800

。完成此操作后，随着线（从2800到4200）慢慢进入视野，破折号向右移动

。电话线{
行程：1400；
动画：轻松绘制4s；
}
@关键帧绘制{
从{
行程偏移：1400；
}
到{
行程偏移：2800；
}
}

在我的浏览器（Firefox/Linux）上，该行完全没有设置动画（与图标相反）。@rr-在Chrome中查看。他只有webkit关键帧规则。是的，我的错误是忘记了我的非供应商前缀。也许更简单的方法是从

-1400

到

0

@paulebeau：我发誓我试过了，但出于某种原因，它之前没有起作用。我一定犯了一些愚蠢的错误。谢谢你的评论，我会在回答中提到：）在我的浏览器中确认了这一点← OP的帖子中的抱怨者应用了这一点，但发现与前进相比，动画启动有明显的延迟。“前进”立即启动动画。我不明白为什么，有人能解释一下吗？

.phone-line {
  stroke-dasharray:1400;
  -webkit-animation: draw 4s ease-in;
}

@-webkit-keyframes draw {
  from {
    stroke-dashoffset: 1400;
  }
  to {
    stroke-dashoffset: 0;
  }
}