下記のコードは、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>
    
```
CC BY-SA 3.0
2016-05-02T12:00:30.653
24517
2016-05-02T12:00:30.653
9359
question
css
上下の枠に接したところで向きを変える方法