CSS - キーフレームは背景画像の縮尺を変換するだけです

Question

hereのように、バックラウンド画像のズームインの効果を得たいと思います。

ページ全体を占めるdivがあります。私はフルスクリーンの背景画像を持っています。画像を拡大/縮小したり、左から右に動かす必要がある場合は、keyframesを使って試してみましたが、これを初めて使用しているので、背景画像をズームインする効果を得る方法がわかりません。私のコードでは、divのすべての要素がバックグラウンド画像だけでなく、ズームインされたりズームアウトされたりします。これを避けて、背景画像をズームインして、ズームアウトしたり、ページ上の他の要素に影響を与えたりすることはありませんか？

これは私のCSSです：

#app { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-image: url('/img/cover.png'); 
    background-size: cover; 
    background-position:center center; 
    animation: zoom 30s infinite; 
} 

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

とHTML：

<div id="app"> 

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

    <div id="drawer"> 
     <div id="item-detail"> 
     </div> 
     <div id="item-detail-carousel"> 
     ... 
     </div> 
    </div> 

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

Answer 1

あなたが好きな何かを行うことができます：

body { 
    min-height:100% 
} 
#app { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    overflow:hidden; 
} 
.background { 
    position:absolute; 
    height: 100%; 
    width: 100%; 
    left: 0; 
    right: 0; 
    z-index: 1; 
    animation: zoom 30s infinite; 
} 
@keyframes zoom { 
    0% { transform:scale(1,1); } 
    50% { transform:scale(1.2,1.2); } 
    100% { transform:scale(1,1); } 
} 

そしてHTML：

<div id="app"> 
    <img class="background" alt="Bg" src="image-surce.jpg"/> 
    <div id="main-section"> 
     ... 
    </div> 

    <div id="drawer"> 
     <div id="item-detail"> 
     </div> 
     <div id="item-detail-carousel"> 
     ... 
     </div> 
    </div> 

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

これはより良い方法です。画像タグを使用してCSSスキルを使用して背景として配置し、次に画像にズームを適用することができます。それで、それは望ましい効果を示します。