我来帮你搞定这个SVG描边动画的问题，下面是针对你需求的完整修改方案和细节说明：

一、完整修改后的代码示例 #

.cls-1 { 
  fill: none; 
  stroke: #00a139; 
  stroke-miterlimit: 10; 
} 

svg { 
  width: 100%; 
  height: 100vh; 
  margin-left: auto; 
  margin-right: auto; 
  display: block; 
  background: #1e1e1e;
  opacity: 0; /* 初始透明，为淡入动画做准备 */
  animation: fadeIn 5s linear forwards; /* 同步淡入动画 */
} 

#Path_70 { 
  stroke-dasharray: 1800; 
  stroke-dashoffset: 1800; /* 初始偏移等于路径总长度 */
  animation: dash 5s linear forwards; /* forwards确保动画结束后保留状态 */
} 

/* 核心描边动画：实现从左到右绘制 */
@keyframes dash { 
  to { 
    stroke-dashoffset: 0; /* 动画结束时偏移归0，完全显示描边 */
  } 
}

/* 淡入动画类效果 */
@keyframes fadeIn {
  to {
    opacity: 1; /* 动画结束时完全不透明 */
  }
}

二、关键修改点说明 #

1. 修正描边方向：从右到左→从左到右 #

这个问题通常是因为路径绘制方向或者stroke-dashoffset的取值逻辑导致的：

• 如果你的#Path_70是从左到右绘制的路径，上面的代码直接就能实现从左到右的描边动画——初始stroke-dashoffset等于路径总长度（1800），动画过程中偏移逐渐减小到0，描边就会从路径起点（左）逐步延伸到终点（右）。
• 如果你测试后还是从右到左，说明你的路径本身是从右往左绘制的，这时候只需要调整描边动画的取值：

  #Path_70 { 
    stroke-dasharray: 1800; 
    stroke-dashoffset: 0; /* 初始偏移设为0 */
    animation: dash-reverse 5s linear forwards;
  } 
  
  @keyframes dash-reverse { 
    to { 
      stroke-dashoffset: -1800; /* 动画到负的总长度，实现视觉上的从左到右 */
    } 
  }
  

2. 确保动画结束后保留描边状态 #

你原代码里的forwards参数已经是正确的！它是animation-fill-mode: forwards的简写，作用就是让元素在动画结束后，保持@keyframes中to节点的样式，这样描边就不会在动画结束后消失。

3. 添加fadeIn淡入动画效果 #

我专门定义了fadeIn关键帧动画，给SVG元素设置初始opacity: 0，动画过程中逐步过渡到opacity: 1，并且把动画时长和描边动画设为一致的5s，这样淡入和描边动画就能同步完成。你也可以根据需求，把这个淡入动画加到#Path_70路径上，只让描边本身淡入。

内容的提问来源于stack exchange，提问作者MD.ALIMUL Alrazy