CSS - キーフレームアニメーションを使用しているときにx軸のスクロールバーを非表示にする

Question

背景画像を拡大しようとしています。私はその問題についてdivになり、それをz-index -1に設定しました。他のセクションやアニメーションがページ上で正しく動作するためには、position:absoluteが必要です。 画像が拡大表示されているときは、下部に水平スクロールバーが作成されます。どのように私はそれを取り除くことができます、私はオーバーフローで試してみました：隠しオーバーフロー - x：隠され、diplayに設定する：ブロックと表示：インラインブロック私はそれがここで示唆されたことを見たが、作業。

これは、そのdiv要素のCSSです：

#bg { 
    background-image: url('/img/cover.png'); 
    background-size: cover; 
    display: inline-block; 
    z-index: -1; 
    animation: zoom 10s; 
    height: 100vh; 
    width: 100vw; 
    animation: zoom 10s; 
    position: absolute; 
    overflow: hidden; 
    overflow-x: hidden; 
} 

@keyframes zoom { 
    0% { transform:scale(1,1); } 
    100% { transform:scale(1.1,1.1);} 
} 

とHTML：

<div id="app"> 
    <div id="bg"> 
    </div> 

     <div id="main-section"> 
     </div> 

    </div> 

    <div id="drawer"> 

     <div id="magazine-detail"> 
     </div> 

     <div id="magazine-detail-carousel"> 
     </div> 

    </div> 

    <div class="large-10 large-centered columns content"> 
    </div> 

    </div> 

更新

私が設定することで、完全に水平スクロールバーを削除：

html, body { 
    ... 
    overflow-x: hidden; 
} 

Answer 1

http://jsfiddle.net/ryanbrill/mdb7X/

**You can try this one if it will work for you or other i will correct your code also ** 

Answer 2

第二には、その最終的なサイズを考慮し、あなたのアニメーション要素の寸法を決めることにより、:)
あなたはスクロールバーを避ける（とoverflow*: hiddenを使用して）することができますしてみてください（私はそれが最も高いと最も広いだろうときである、その大きさを考えると意味ここでは、アニメーションの終わりに）

ペン：http://codepen.io/PhilippeVay/pen/RGOzar

それは+ 50％の幅で二度も高くなる可能性がある場合は、その幅がビューポートの半分で三分の二と高さで定義されています。 * 1.5 = 100％、66％および50％* 2 = 100％、ないスクロールバー:)

#bg { 
 
    background-image: url('/img/cover.png'); 
 
    background-size: cover; 
 
    display: inline-block; 
 
    z-index: -1; 
 
    height: calc(100vh/2); 
 
    width: calc(100vw/1.5); 
 
    animation: zoom 6s infinite; 
 
    position: absolute; 
 
    transform-origin: left top; 
 
} 
 

 
@keyframes zoom { 
 
    0% { transform:scale(1, 1); } 
 
    100% { transform:scale(1.5, 2);} 
 
}

<div id="app"> 
 
    <div id="bg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, sit omnis modi facere architecto veritatis odio quod sed necessitatibus? Libero doloribus deleniti beatae in facilis animi, aspernatur blanditiis obcaecati illo. 
 
    </div> 
 

 
     <div id="main-section">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis harum saepe nam ratione, sint cum ea repellat ipsam quod sunt nisi officiis temporibus eveniet accusantium animi modi omnis! Eius, est! 
 
     </div> 
 

 
    </div> 
 

 
    <div id="drawer"> 
 

 
     <div id="magazine-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto iure aliquid incidunt modi culpa est iusto exercitationem, quaerat ab reiciendis nobis, unde corporis mollitia eius molestiae! Tempore sit vitae modi. 
 
     </div> 
 

 
     <div id="magazine-detail-carousel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequuntur odit aliquam incidunt omnis ipsa tempore, error explicabo. Non, nam veritatis quae excepturi provident dolore doloremque tempore minus alias aliquid. 
 
     </div> 
 

 
    </div> 
 

 
    <div class="large-10 large-centered columns content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, soluta rerum quasi libero pariatur tempora tenetur ipsam repellendus fuga, ea illo doloribus natus aliquam. Labore vero atque nostrum, consequuntur nobis. 
 
    </div> 
 

 
    </div>