ピクチャのアニメーションが途中で停止する

Question

タイトルに何を書き込むのかわからないので、誤解を招くような人にはごめんなさい。

私はdivを2つの日付の間にしか見えないようにする方法を尋ねましたが、答えは問題なく動作します。今、私は同じdiv（とそれが使用する写真）が同じページの高さを持つことを望みます。高さも100％に設定されていますが、それはちょうど写真を100％とし、それを自己ではないようにします。これにより、画像（アニメーション）が途中で止まり、馬鹿に見えます。

高さをページの高さに応じて自動的に調整するにはどうすればよいですか？

CSS：

#snow{ 
    background: none; 
    font-family: Androgyne; 
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png'); 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index:9999; 
    pointer-events: none; 
    -webkit-animation: snow 10s linear infinite; 
    -moz-animation: snow 10s linear infinite; 
    -ms-animation: snow 10s linear infinite; 
    animation: snow 10s linear infinite; 
} 
@keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} 
} 
@-moz-keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} 
} 
@-webkit-keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} 
} 
@-ms-keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} 
} 

@media all and (max-width: 1024px) { 
    #snow { 
    display:none; 
    } 
} 

@media all and (max-width: 720px) { 
    #snow { 
    display:none; 
    } 
} 

使用id="snow"相続人codepen http://codepen.io/Volcan3/pen/ENPpPN

Answer 1

height: 100%が実際にに、この要素の高さを設定することを意味し、より簡単に理解するために雪の影響

<div id="snow"></div> 

を表示しますそのうちの100％は要素を含んでいます。

あなたは詳細hereを読むことができます：

割合は、生成されるボックスの包含ブロックの高さに関して計算されます。包含ブロックの高さが明示的に指定されていない場合（すなわちコンテンツの高さに依存する）、この要素は絶対的に配置されていない場合、値はautoに計算されます。ルート要素のパーセンテージの高さは、最初に格納されているブロックを基準にしています。

<div id="snow"></div>ブロックの親要素が適切にスタイルされていることを確認してください。

これで問題が解決しない場合は、お気軽にコメントしてください。

UPDATE：

あなたのコードに問題がある：

#snowの親要素は.snow-wrapperの親がbodyで、.snow-wrapperです。

#snowは、.snow-wrapperの高さから計算すると、position: absolute; height: 100%のスタイルを持っています。

.snow-wrapperを見てみましょう。それはスタイルheight:100%;を持っています。ただし、絶対配置されておらず、親（body）には明示的に設定された高さがありません。

収容ブロックの高さが明示的に指定されていない（コンテンツの高さに依存する）場合、この要素は絶対的に配置されないため、autoに計算されます。

.snow-wrapperを調べると、計算された高さが0であることがわかります。

このcodepenインスタンスを動作させる1つの方法は、ボディを相対的に配置することです。

これは単なる速い修正です。

関連トピックについてさらに調査する必要があります。 Googleでdocument flow、flex layout、clearfixなどのキーワードを試してみてください。