上下の枠に接したところで向きを変える方法

下記のコードは、marqueeタグの代わりにCSSを使って文字(〇)を"ジグザグ走行"させたものです。
しかし、その文字は親要素のdiv(id="container")で設定した背景色の上の枠からははみ出て、
下の枠からは幾分上の方で向きが変わってしまいます。
どうすれば、上下の枠に接したところで向きが変わるようになるでしょうか。ご教示ください。

<style>

#container{
        background:silver;
        width:100%;
        height:30px;
}

#moji1 {display:inline-block;
    -webkit-animation:moji1 15s infinite linear;
    animation:moji1 15s infinite linear;
}
@keyframes moji1 {   
    From{
        -ms-transform:translateX(1100px);
        -webkit-transform:translateX(1100px);
        transform:translateX(1100px);
    }
    To{
        -ms-transform:translateX(-1100px);
        -webkit-transform:translateX(-1100px);
        transform:translateX(-1100px);
    }
}


.moji2 {display:inline-block;
        font-size:20px;
    -webkit-animation:moji2 0.5s infinite linear;
    animation:moji2 0.5s infinite linear;
}
@keyframes moji2 {   
    From{
        -ms-transform:translateY(-10px);
        -webkit-transform:translateY(-10px);
        transform:translateY(-10px);
    }
    To{
        -ms-transform:translateY(10px);
        -webkit-transform:translateY(10px);
        transform:translateY(10px);
    }
}
</style>

<div id="container">
   <div id="moji1">
       <span class="moji2">○</span>
   </div>
</div>