Illustratorで作成したsvgに、cssでつけたアニメーションが途中から始まってしまう

Question

Illustratorで作成したパスをsvgで書き出し、CSSでアニメーションを付けました。
パスの書き順通りに再生されると聞いていたのですが、一部パスだけ途中からアニメーションが始まってしまいます。

再生は赤いラインを入れた部分から始まってしまいます。
左から何度も書き直してみましたが直りませんでした。

<svg class="sgwid" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1366px"
	 height="630.063px" viewBox="0 0 1366 630.063" enable-background="new 0 0 1366 630.063" xml:space="preserve">

		<path class="st0 path" fill="none" stroke="#85B1DF" stroke-width="2" stroke-miterlimit="10" d="M-27,215.825c0,0,165.392,193.585,340,276
		c500,236,870.225,108.336,922-107c44-183-94.979-397.462-342-341c-280,64-284,424-70,528c162.503,78.974,336.154,15.055,433.5-75.5
		c129-120,180.5-320.5,180.5-320.5"/>

		<path class="st0 path" fill="none" stroke="#85B1DF" stroke-width="2" stroke-miterlimit="10" d="M-22-4.175c0,0,247.466,576.368,915,621
			c344,23,524-245,524-245"/>

			<image class="grap" overflow="visible" width="773" height="773" xlink:href="image/home/maruphoto01.png"  transform="matrix(0.7088 0 0 0.7088 682.3213 41.3877)">
		</image>

		<path class="circle" fill="#D7092F" d="M1022.75,149.733c0,77.551,62.867,140.418,140.418,140.418s140.418-62.867,140.418-140.418
			c0-77.551-62.867-140.418-140.418-140.418S1022.75,72.182,1022.75,149.733"/>
</svg>

/* SVGアニメーション用CSS 共通 */
.path {
	opacity: 0;
}

.animation-start .path {
  opacity: 1;
	stroke: #85B1DF; /* アウトライン色 */
	fill: none; /* 塗りの色 */
	stroke-width:1; /* 線の太さ */
	stroke-dasharray: 3000;
	stroke-dashoffset:3000;
	animation: DASH 3s ease-in alternate forwards;
		-webkit-animation:DASH 3s ease-in 0s forwards;
		-o-animation:DASH 3s ease-in 0s forwards;
	animation:DASH 3s ease-in 0s forwards;
}

@keyframes DASH{
	0%{stroke-dashoffset:3000;}
	100%{stroke-dashoffset:0;}
}
@-moz-keyframes DASH{
	0%{stroke-dashoffset:3000;}
	100%{stroke-dashoffset:0;}
}
@-webkit-keyframes DASH{
	0%{stroke-dashoffset:3000;}
	100%{stroke-dashoffset:0;}
}
@-o-keyframes DASH{
	0%{stroke-dashoffset:3000;}
	100%{stroke-dashoffset:0;}
}
@-ms-keyframes DASH{
	0%{stroke-dashoffset:3000;}
	100%{stroke-dashoffset:0;}
}

.grap {
	opacity: 0;
}
.animation-start .grap {
	animation: fadeIn 3s ease 2s 1 forwards; /* 長さ タイミング いつ始まるか 繰り返し数 保持*/
}

.circle {
	opacity: 0;
}
.animation-start .circle {
	animation: fadeIn 2s ease 2.2s 1 forwards; /* 長さ タイミング いつ始まるか 繰り返し数 保持*/
}

.animation-start .inner {
	opacity: 0;
}
.animation-start .inner {
	animation: fadeIn 2s ease 3s 1 forwards; /* 長さ タイミング いつ始まるか 繰り返し数 保持*/
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 0.9}
}

.animation-start　はinview.jsで、スクロールした際にアニメーションが再生されるようにつけているクラスです。

必要なコードがあればアップします。
どなたかお分かりになる方がいらっしゃればご教授ください。
よろしくお願い致します。

Answer 1

切れてしまったところでパスを二つに分けて、後半パスのアニメーション開始時間をずらして繋がっているように対応した。