Quiero usar animación CSS para el atributo "d" a la ruta SVG. Este ejemplo funciona en Google Chrome:

body {
  background-color: #022040;
}

#path {
  d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L925,225'); 
  stroke: #1EFE64;
  fill: none;
  animation-name: path;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}


@keyframes path {

  0% {
     d: path('M425,225 L475,275');
  }

  25% {
     d: path('M425,225 L475,275 L575,175 L575,175 L575,175 L575,175 L575,175');
  }
  
  50% {
     d: path('M425,225 L475,275 L575,175 L675,275 L675,275 L675,275 L675,275'); 
  }
  
  75% {
     d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L775,175 L775,175'); 
  }
  
  90% {
     d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L875,275'); 
  }
  
  100% {
     d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L925,225'); 
  }
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="400">
<path id="path" stroke-width="20"/>
</svg>

Pero no funciona en Safari Pc / Mobile y FireFox.

¿Cómo arreglar el error? ¿O debería usar la etiqueta "animar" en svg?

Ayúdame por favor) ¡Gracias!