我如何进一步扩展我的动画？ （animate.css）

Question

基本上我有一个使用animate.css动画的波形，我试图将（svg图像）扩展到网站的边界之外，以便在它动画时没有奇怪的间隙（i希望有道理）。请查看附图。

HTML

<div class="top">

    <h1></h1>

</div>

<div class="wave animated pulse">

    <object type="image/svg+xml" data="image/svg1wave.svg">
        <!-- fallback -->
        <img src="image/svg1wave.svg" alt="wave-front">
    </object>

</div>

    <div class="wave2 animated pulse">

  <object type="image/svg+xml" data="image/svg2wave.svg">
        <!-- fallback -->
        <img src="image/svg2wave.svg" alt="wave-front">
    </object>

   </div>

CSS

body {
width: auto;
background-color: #61d4f4;

}

.top {
background: white;

}

.wave {
margin: 500px auto 0 auto;
-webkit-animation-duration: 10s;
animation-iteration-count: infinite;
width:100%;

}

.wave2 {
margin: -50px auto 0 auto;
-webkit-animation-duration: 10s;
animation-iteration-count: infinite;
position:relative;

}