アニメーション背景フィッティング画面

Question

私はスプラッシュ画面上に100％から200％までゆっくりと拡大する背景画像を持っています（他に理由はありません）。水平の画像は水平の画像としてはうまく動作しますが、画面が狭い場合（モバイル機器の場合）は、画像が背景をいっぱいに満たさないため、上下に空白があります。背景サイズを「カバー」に変更すると、アニメーションが正しく機能しません（画面を塗りつぶすのではなく0％にズームします）。

私は最初のサイズをカバーするように設定して、常に画面いっぱいにしてゆっくりと200％に拡大する方法を教えてください。私はあなたのスニペットを動作させることができなかった

$('.background').animate({ 
 
    backgroundSize: "200%" 
 
\t }, 40000);

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.background { 
 
\t width: 100%; 
 
\t height: 100vh; 
 
\t background-image:url(Front-Cover.jpg); 
 
\t background-size: 100%; 
 
\t background-repeat: no-repeat; 
 
\t background-position: center center; 
 
} 
 
\t 
 
.header { 
 
\t width: 100%; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 
\t 
 
.header img { 
 
\t width: 100%; 
 
\t height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
\t <img src="header.png" alt=""> 
 
</div> 
 

 
<div class="background"></div>

Answer 1

。このCSSにショットをつけてください。jqueryは必要ありません。

.background { 
     width:100%; 
     height:100%; 
     background-image:url(Front-Cover.jpg); 
     background-position: center; 
     background-size: cover; 
     animation: 5s ease example infinite; 
} 

@keyframes example { 
    0% { transform: scale(1);} 
    50% { transform: scale(2);} 
    0% { transform: scale(1);} 
} 

@keyframes example { 
    0% { -webkit-transition: scale(1);} 
    50% { -webkit-transition: scale(2);} 
    0% { -webkit-transition: scale(1);} 
} 
    @keyframes example { 
    0% { -moz-transition: scale(1);} 
    50% { -moz-transition: scale(2);} 
    0% { -moz-transition: scale(1);} 
}