用于dashoffset ON / OF的svg动画无法正常工作

Question

我需要为svg折线制作动画。
平稳且有延迟。

  

HTML：

<polyline id="svg_sm_pl1_id" class="svg_sm anim_OFF" points="0,98 182,98 288,0"/>

  

css：

.svg_sm {
 position: absolute;
 fill: none;
 stroke-width: 0.8%;
}

#svg_sm_pl1_id {
 stroke-dasharray: 92%;
 stroke-dashoffset: 92%;
}

#svg_sm_pl1_id.anim_OFF {
 animation: svg_sm_pl1_OFF 1s 1s ease-in forwards;
}
@keyframes svg_sm_pl1_OFF {
/*    from { stroke-dashoffset: 0; }*/
 to { stroke-dashoffset: 92%; }
}

#svg_sm_pl1_id.anim_ON {
 animation: svg_sm_pl1_ON 1s 1s ease-in forwards;
}
@keyframes svg_sm_pl1_ON {
 from { stroke-dashoffset: 92%; }
 to { stroke-dashoffset: 0; }
}

  

JS：

function animate_svg( svg_class_owner, how ) {
   var x = document.getElementsByClassName( "svg_" + svg_class_owner );
   switch ( how )
    {
     case C_ON:
      for ( var i = 0; i < x.length; i++)
      {
       x[i].classList.add( "anim_ON" );
       x[i].classList.remove( "anim_OFF" );
      }
     break;
     case C_OFF:
      for ( var i = 0; i < x.length; i++)
      {
       x[i].classList.remove( "anim_ON" );
       x[i].classList.add( "anim_OFF" );
      }
     break;
    }
}

当我将其打开时效果很好。
但是对于OFF状态，它会忽略延迟和持续时间。
如果我从{stroke-dashoffset：0;开始取消注释； } 顺利关闭，但首先还是消失了。
看起来折线的dashoffset不想在位置0开始隐藏。