CSSアニメーション中に背景画像のサイズを変更せずにちらつきを取り除く

Question

私は<div>をスライドショー画像コンテナとして使用しています。容器内に表示される画像は、異なるサイズであり、そのよう背景画像ではなく、容器内部<img>要素として適用される：必要に応じて、メディアは

照会を介してIは画像のセットを交換することができる

• 背景私はbackground-size:coverとbackground-clip:content-boxを有するスライドショー効果

を生成するようにアニメーション化することができ、これらは正しく過剰が正しく切り取られることを確実に、容器の所望の領域内の画像を保持しています。

最初の問題は、CSSアニメーション中に、あるイメージが別のイメージに移行するときに、そのイメージがそのキーフレームのタイミングでリサイズされることです。私が望むのは、次の画像がサイズ変更されずに（適切なサイズで）ただちに移行されることです。

実際には、最初にクロスフェードビジュアリゼーションがあるのか​​どうかはわかりません。なぜなら、私はこれを行うような指示がないからです（おそらく-webkit-アニメーションが内蔵されていますか？）。私はあなたがちょうど1つのイメージから次へとすぐに変化を見ると思ったでしょう。私は実際にクロスフェードが好きですが、どこから来ているのかわからないと、サイズ変更の問題に関係していると思います。

第2の問題は、スライドショーの最初の反復（のみ）中に画像のちらつきがあり、コンテナ要素の白地色が短く表示されることです。これは最初の反復でのみ発生するので、おそらく画像の最初のダウンロード時間に問題があったと思います。そのため、後続の反復で消えてしまうのです。しかし、スライドショーが始まる前に画像をプリロードするためにJavaScriptを追加して同じ問題を発見した場合、それは当てはまりませんでした。また、ショーを実行すると、キャッシュにイメージがあり、ページを更新すると（キャッシュからイメージを取得するだけです）、自分のテストサーバーからファイルを取得することでテストしていますキャッシュが正しく）、フリッカーが再び発生します。

私は、さまざまなCSSのプロパティ設定でフリッカーを除去することについての投稿を見てきましたが、preserve3dなどを使用していますが、それでも役立たないものはありません。私は、Windows 10

#outerFrame { 
 
    background-color: #22130c; 
 
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2), 
 
       inset 0 -2px 1px hsla(0,0%,0%,.4), 
 
       0 5px 50px hsla(0,0%,0%,.25), 
 
       0 20px 20px -15px hsla(0,0%,0%,.2), 
 
       0 30px 20px -15px hsla(0,0%,0%,.15), 
 
       0 40px 20px -15px hsla(0,0%,0%,.1); 
 
    padding: 1.5em; 
 
    overflow: auto; 
 
    float: left; 
 
    margin: 0 1em 1em 0; 
 
} 
 

 
#innerFrame { 
 
    background-color: #fff5e5; 
 
    box-shadow: 0 2px 1px hsla(0,0%,100%,.2), 
 
       0 -1px 1px 1px hsla(0,0%,0%,.4), 
 
       inset 0 2px 3px 1px hsla(0,0%,0%,.2), 
 
       inset 0 4px 3px 1px hsla(0,0%,0%,.2), 
 
       inset 0 6px 3px 1px hsla(0,0%,0%,.1); 
 
    padding: 1.5em; 
 
} 
 

 
/* This is the relevant style: */ 
 
#innermostFrame { 
 
    padding: .75em; 
 
    background-color: #fff; 
 
    box-shadow: 0 -1px 0 2px hsla(0, 0%, 0%,.03); 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-size:cover; 
 
    background-clip: content-box; 
 
    animation: cycle 8s ease-in-out infinite; 
 
    
 
    width: 30vw; 
 
    height:40vh; 
 
    min-width: 200px; 
 
    max-width: 900px; 
 
} 
 

 
@keyframes cycle { 
 
    0% { background-image: url("https://picsum.photos/200/300/?random"); } 
 
    25% { background-image: url("https://picsum.photos/640/480/?random"); } 
 
    50% { background-image: url("https://picsum.photos/1900/1200/?random"); } 
 
    75% { background-image: url("https://picsum.photos/480/200/?random"); } 
 
    100% { background-image: url("https://picsum.photos/600/300/?random"); } 
 
}

<div id="outerFrame"> 
 
    <div id="innerFrame"> 
 
    <div id="innermostFrame"></div> 
 
    </div> 
 
</div>

にクローム62.0.3202.94デスクトップを使用してい

は私がサイドステップができ、他の様々な技術を用いてこれらの問題を実現する（すなわちJavaScriptは、<img>要素を積み重ねますopaccityなどを管理していますが）、私は実際にこれらの2つの問題の原因を理解しようとしています。

Answer 1

1.クロスフェード：

ブラウザがキーフレーム間でアニメーション化しようとするため、これが発生します。 @keyframesサイクルを見ると、キーフレームを25％ごとに作成することがわかります。つまり、ブラウザは0％から25％にアニメーション化されます。何がアニメーション化されますか？変更された背景。どのようにアニメーション化されますか？クロスフェード。また、背景はdivをカバーするように再度サイズ設定されます（使用される画像は異なる形式です - 同じ形式を使用する場合、これはおそらく起こりません）。

@keyframes cycle { 
    0% { background-image: url("https://picsum.photos/200/300/?random"); } 
    25% { background-image: url("https://picsum.photos/640/480/?random"); } 
    50% { background-image: url("https://picsum.photos/1900/1200/?random"); } 
    75% { background-image: url("https://picsum.photos/480/200/?random"); } 
    100% { background-image: url("https://picsum.photos/600/300/?random"); } 
} 

ソリューションA（ノークロスフェードと白の背景）

あなたはアニメーションはほぼ瞬時に起こるせることでサイズ変更を取り除くことができます。

0% { background-image: url("https://picsum.photos/200/300/?random"); } 
24.99% { background-image: url("https://picsum.photos/200/300/?random"); } 
25% { background-image: url("https://picsum.photos/640/480/?random"); } 

バックグラウンドのキーフレームで0％キーフレーム24.99％で同じですので、アニメーション化されません。

#outerFrame { 
 
    background-color: #22130c; 
 
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2), 
 
       inset 0 -2px 1px hsla(0,0%,0%,.4), 
 
       0 5px 50px hsla(0,0%,0%,.25), 
 
       0 20px 20px -15px hsla(0,0%,0%,.2), 
 
       0 30px 20px -15px hsla(0,0%,0%,.15), 
 
       0 40px 20px -15px hsla(0,0%,0%,.1); 
 
    padding: 1.5em; 
 
    overflow: auto; 
 
    float: left; 
 
    margin: 0 1em 1em 0; 
 
} 
 

 

 
#innerFrame { 
 
    position: relative; 
 
    background-color: #fff5e5; 
 
    box-shadow: 0 2px 1px hsla(0,0%,100%,.2), 
 
       0 -1px 1px 1px hsla(0,0%,0%,.4), 
 
       inset 0 2px 3px 1px hsla(0,0%,0%,.2), 
 
       inset 0 4px 3px 1px hsla(0,0%,0%,.2), 
 
       inset 0 6px 3px 1px hsla(0,0%,0%,.1); 
 
    padding: 1.5em; 
 
} 
 

 
/* This is the relevant style: */ 
 
#innermostFrame{ 
 
    padding: .75em; 
 
    background-color: #fff; 
 
    box-shadow: 0 -1px 0 2px hsla(0, 0%, 0%,.03); 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-size:cover; 
 
    background-clip: content-box; 
 
    animation: cycle 8s ease-in-out infinite; 
 
    width: 30vw; 
 
    height:40vh; 
 
    min-width: 200px; 
 
    max-width: 900px; 
 
} 
 

 
@keyframes cycle { 
 
     0% { background-image: url("https://picsum.photos/200/300/?random"); } 
 
     24.99% { background-image: url("https://picsum.photos/200/300/?random"); } 
 
     
 
     25% { background-image: url("https://picsum.photos/640/480/?random"); } 
 
     49.99% { background-image: url("https://picsum.photos/640/480/?random"); } 
 
     
 
     50% { background-image: url("https://picsum.photos/1900/1200/?random"); } 
 
     74.99% { background-image: url("https://picsum.photos/1900/1200/?random"); } 
 
     
 
     75% { background-image: url("https://picsum.photos/480/200/?random"); } 
 
     99.99% { background-image: url("https://picsum.photos/480/200/?random"); } 
 
     
 
     100% { background-image: url("https://picsum.photos/200/300/?random"); } 
 
}

<div id="outerFrame"> 
 
    <div id="innerFrame"> 
 
    <div id="innermostFrame"></div> 
 
    </div> 
 
</div>

ご注意を：それは、以下の作業スニペットを参照してください（これはインスタント変更のようになります）25％で変化します！最後のキーフレーム（100％）は、途中でループを開始したいので、最初の（0％）と同じ値に設定する必要があります。実際には、この例では4つの異なる背景画像しか持たないことを意味しています（5％の場合、代わりに20％のステップを取る）。

サイズ変更の背景で問題を修正しました。副作用として、クロスフェードも「固定」されました。実際の欠点は、最初にアニメーションが再生されたときに白い背景が残っていることです。

2.ホワイトバックグラウンド

私はイメージが最初にロードする必要があるため、白の背景が表示されると推定。アニメーションの実行時にのみロードされます。そのため、最初のラントラフには白い背景があります。 （クロスフェードなし白背景）

溶液B

我々はバッククロスフェード効果を得るために、二次のdivを使用することができます。しかし、キーフレームに不透明度を設定する必要があります。他のdivを表示しながら、キーフレームに背景画像を設定することができます。そのため、読み込む時間が増え、白い背景が表示されません。下のスニペットを参照してください：

#outerFrame { 
 
    background-color: #22130c; 
 
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2), 
 
       inset 0 -2px 1px hsla(0,0%,0%,.4), 
 
       0 5px 50px hsla(0,0%,0%,.25), 
 
       0 20px 20px -15px hsla(0,0%,0%,.2), 
 
       0 30px 20px -15px hsla(0,0%,0%,.15), 
 
       0 40px 20px -15px hsla(0,0%,0%,.1); 
 
    padding: 1.5em; 
 
    overflow: auto; 
 
    float: left; 
 
    margin: 0 1em 1em 0; 
 
} 
 

 

 
#innerFrame { 
 
    position: relative; 
 
    background-color: #fff5e5; 
 
    box-shadow: 0 2px 1px hsla(0,0%,100%,.2), 
 
       0 -1px 1px 1px hsla(0,0%,0%,.4), 
 
       inset 0 2px 3px 1px hsla(0,0%,0%,.2), 
 
       inset 0 4px 3px 1px hsla(0,0%,0%,.2), 
 
       inset 0 6px 3px 1px hsla(0,0%,0%,.1); 
 
    padding: 1.5em; 
 
} 
 

 
/* This is the relevant style: */ 
 
#innermostFrame, 
 
#innermostFrame2{ 
 
    padding: .75em; 
 
    background-color: #fff; 
 
    box-shadow: 0 -1px 0 2px hsla(0, 0%, 0%,.03); 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-size:cover; 
 
    background-clip: content-box; 
 
    animation: cycle 8s ease-in-out infinite; 
 
    width: 30vw; 
 
    height:40vh; 
 
    min-width: 200px; 
 
    max-width: 900px; 
 
} 
 
#innermostFrame2{ 
 
    position: absolute; 
 
    top: 1.5em; /* padding of innerFrame */ 
 
    animation: cycle2 8s infinite; 
 
    background-image: url("https://picsum.photos/200/300/?random"); 
 
} 
 
@keyframes cycle { 
 
    0% { background-image: url("https://picsum.photos/640/480/?random"); } 
 
    50% { background-image: url("https://picsum.photos/640/480/?random"); } 
 
    51% { background-image: url("https://picsum.photos/480/200/?random"); } 
 
    100% { background-image: url("https://picsum.photos/480/200/?random"); } 
 
} 
 
@keyframes cycle2 { 
 
    15% { opacity: 1;} 
 
    25% { opacity: 0; background-image: url("https://picsum.photos/200/300/?random"); } 
 
    
 
    26% { background-image: url("https://picsum.photos/1900/1200/?random");} 
 
    40% { opacity: 0;} 
 
    50% { opacity: 1;} 
 
    65% { opacity: 1;} 
 
    75% { opacity: 0; background-image: url("https://picsum.photos/1900/1200/?random");} 
 
    
 
    76% { background-image: url("https://picsum.photos/200/300/?random");} 
 
    90% { opacity: 0;} 
 
    100% { opacity: 1;} 
 
}

<div id="outerFrame"> 
 
    <div id="innerFrame"> 
 
    <div id="innermostFrame"></div> 
 
    <div id="innermostFrame2"></div> 
 
    </div> 
 
</div>

ソリューションBは、次のように説明し

を考えはそれらが示される前に、背景画像をロードさせることです。そのため2つのdivと2つの@keyframeのアニメーションが交互に背景を滑らかにします。

#innermostFrame2は、幅と高さが同じ#innermostFrameとなり、絶対的に（真上に）配置されます。 #innermostFrame2は、アニメーションの持続時間の25％で表示され、隠されています。以下は、表示されている：

  25%    25%    25%    25% 
[ #innermostFrame2 - #innermostFrame - #innermostFrame2 - #innermostFrame ] 

パーセンテージ：

は背景画像が既に#innermostFrame2自身に設定されている - それは可能な限り迅速にロードするために。 @keyframes cycle2では、背景が既に設定されているため、0％の必要はありません。

アニメーションの25％（4枚）の画像を表示します。今度は、この例で10％のクロスフェードがうまく見えると決めました（8秒のアニメーションの10％は0.8秒です）。これは趣味の問題であるため、少なくても多くを行うことができます。このため、アニメーションは15％で1、25％で0の不透明度で開始されます。 divが見えなくなった直後に背景画像を26％に変更するので、CSSオブジェクトモデルにロードすることができます。

の背景が表示されています（#innermostFrame2が非表示になっているため）。これをアニメーションの持続時間の25％で表示します。したがって、50％で新しい背景で再び#innermostFrame2が見えるようにします。私がアニメーションの期間の10％をクロスフェードすることに決めたので、私たちは40％でopacity: 0;で始まります。 #innermostFrame2が完全に表示された直後（50％）、#innermostFrameの背景を変更して読み込みます。これは51％で発生します@keyframes cycle