Создал такую анимацию: на экране вырисовывается контур дома, а после этого вместо контура появляется само изображение этого дома.
Как только я вкрячил эту анимацию на сайт, контур дома съехал вниз вправо. Как сделать так, чтобы они совпадали?
https://vincent-job.codio.io/ блок с картинкой дома и его контуром нах-ся в блоке "Что такое утепление пенополиуретаном?" (после блока "Почему выбирают нас?").
HTML:
<div class="column12">
<img id="index" class="fadeIn fadeIn-5s fadeIn-Delay-5s" src="svg/dom.jpg" alt="">
<svg version="1.1" id="Layer_1" class="fadeOut fadeOut-3s fadeOut-Delay-3s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1200px" height="570px" viewBox="0 0 1200 570" style="enable-background:new 0 0 1200 570;" xml:space="preserve">
<style type="text/css">
<![CDATA[.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:5;}]]>
</style>
<path class="st0" d="M798.5,402l-5,3.5l-0.5,7l-348.5,76l-70-199.5l-8.5,14l-10.5-4l-0.5-4.5L521,18l6.5-4.5c0,0,9.5,4,10,5.5
s-2.5,6-2.5,6l53.667,36.667L732,56.333L732.667,61l-2,9.333L728,73.667L707.334,77L720,133l4,0.667l8.667,8.667l3.333,1.333
l0.667,6.667l-4.667,6l69.334,47.333l8.666,2l2,6l-1.333,4L809.334,219l0.666,6.667l-8.666,8.667l-2.667,5.333L795.334,241
l-10.667,10L798.5,402z"/>
</svg>
</div>
CSS:
.st0 {
stroke-dasharray: 1608;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 1600;
}
to {
stroke-dashoffset: 0;
}
}
#index {
position: relative;
z-index: -1;
}
#Layer_1 {
position: absolute;
z-index: 1;
}