SVGアニメーションの遅延表示をCSSで設定すると裏でアニメーションが進むのを解消したい

Question

以下のようなSVGアニメーションを設置してます。

<svg class="mask" viewBox="0 0 834.4 235.2" id="move">

<defs>
<mask id="clipMask">
<!--マスクのpath-->
<path class="st1" data-start="1200" d=割愛します></path>
</mask>
</defs>

<image xlink:href="hogehoge.svg" width="100%" height="100%" mask="url(#clipMask)">
</image>
</svg>

これを遅延表示させるためにCSSで以下のように設定しました。

#move {
  opacity: 0;
  animation: appeare 0s ease 3s 1 normal forwards running;
}

@keyframes appeare {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} 

遅延させている間にSVGアニメーションが進んでしまいます。
表示した瞬間からアニメーションが始まるように設定するにはJSのsetTimeoutを設定すべきでしょうか。
あるいは別に最適な方法があればご指南ください。

Comments

[yambejp]

動作が確認できるsvgを提示下さい

[int32_t]

提示されているコードにSVGアニメーションが含まれていないので、解決方法を提示しにくい状態です。