CSSを使用したSVGのアニメーション

私は、正しくアニメーション化されている単純なSVGを持っています。問題は、SVGパスが最初にロードされると、開始前にSVGパスが表示されてから消えてしまうことです。st1とst2の不透明度を0に設定してから、不透明度1にキーフレームを設定しようとしました。この種の機能は動作しますが、実行されます。CSSを使用したSVGのアニメーション

シンプルなものがありませんか？

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 485 500.9" style="enable-background:new 0 0 485 500.9;" xml:space="preserve"> 
<style type="text/css"> 
.st0{clip-path:url(#SVGID_2_);fill:none;stroke:#FFFFFF;stroke-dasharray: 1000; 
animation: draw 4s normal ease-in;} 
.st1{clip-path:url(#SVGID_2_);fill:none;stroke:#FFFFFF;stroke-dasharray: 1000; 
animation: draw 4s normal ease-in;animation-delay: 1s;} 
.st2{clip-path:url(#SVGID_2_);fill:none;stroke:#FFFFFF;stroke-dasharray: 1000; 
animation: draw 4s normal ease-in;animation-delay: 3s;} 
@keyframes draw { 
from { 
stroke-dashoffset: -1000; 
} 
to { 
stroke-dashoffset: 0; 
} 
} 
</style> 
<g> 
<defs> 
    <rect id="SVGID_1_" x="-0.1" y="0" width="485" height="501"/> 
</defs> 
<clipPath id="SVGID_2_"> 
    <use xlink:href="#SVGID_1_" style="overflow:visible;"/> 
</clipPath> 
<path class="st0" d="M0.4,97.4c0-14.2,14.2-14.2,14.2-14.2H100l5.1,0h86.3c0,0,14.2,0,14.2-14.2V36.4V0"/> 
<path class="st1" d="M207.5,236.3l0-31.3c0,0,0-14.2-14.2-14.2h-15.1l-142.8,0.1H14.6c-14.2,0-14.2-14.2-14.2-14.2V103"/> 
<path class="st2" d="M484.9,500.5H221.8c-14.2,0-14.2-14.2-14.2-14.2l-0.1-242.6"/> 
</g> 
</svg>

参照： https://jsfiddle.net/suLkr4po/

がどのように私は他の上から下まで終了した後、各パスが入ってくるので、これを再構築しますか？

出典

2017-10-31 VI_au

行が表示されるようにサンプルを更新してください。ほとんど白い上の白はうまくいきません。 –