CSS로 SVG 애니메이션하기

정확하게 움직이는 SVG가 있습니다. 문제는 첫 번째로드에서 SVG 경로가 표시되고 시작 전에 사라진다는 것입니다. st1 및 st2의 불투명도를 0으로 설정 한 다음 불투명도 1로 키 프레임을 설정해 보았습니다.이 종류의 작동하지만 SVG는 사라집니다. 실행됩니다.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

선이 보이도록 예제를 업데이트하십시오. 거의 흰색 인 흰색은 효과가 없습니다. –