インターレースされたアニメーション効果を作成するための鍵は、nth-child（）またはCSSカスタム屬性を使用して、要素のシーケンシャル遅延再生を?qū)g現(xiàn)するためにAnimation-Delayを使用することです。 1。使用：nth-child（）は、各リスト項目の増分アニメーション解雇値を手動で設定して、エントリを1つずつ達成します。 2。-iおよび-delayなどのCSSカスタム屬性を使用して、HTMLのレイテンシを動的に制御して保守性を向上させます。 3。逆のインターレース効果は、calc（）を介して動的に計算できます。 4.遅延制御は0.1秒から0.2秒の間で、最終狀態(tài)を維持するために前方を使用し、変換または不透明度を使用して視覚効果を高めることをお勧めします。この方法は、レスポンシブデザインに適しており、拡張しやすいです。

CSSを使用してずらされたアニメーション効果を作成することは、波やリップル効果など、それぞれの間にわずかな遅延があると、複數(shù)の要素を順番にアニメーション化することを意味します。これは、一般的にアニメーションリスト、ヒーローセクション、またはロードシーケンスに使用されます。きれいかつ効果的にそれを行う方法は次のとおりです。

:nth-child()またはcssカスタムプロパティでanimation-delayを使用します

よろめく効果の鍵は、同じアニメーションを複數(shù)の要素に適用することですが、 animation-delayを使用して開始時間を相殺することです。これを手動で行うことができます:nth-child() 、またはCSSカスタムプロパティ（変數(shù)）を使用して動的に使用できます。

方法1：手動の遅延:nth-child()

アイテムのリストがあると仮定します。

 <ul class = "stagger-list">
  <li>アイテム1 </li>
  <li>アイテム2 </li>
  <li>アイテム3 </li>
  <li>アイテム4 </li>
  <li>アイテム5 </li>
</ul>

遅延を増やしてフェードインアニメーションを適用します。

 @KeyFrames Fadein {
  から {
    不透明：0;
    変換：翻訳（10px）;
  }
  に {
    不透明：1;
    変換：翻訳（0）;
  }
}

.stagger-listli {
  不透明：0;
  アニメーション：Fadein 0.5sがフォワードを容易にします。
}

.stagger-list li：nth-child（1）{animation-delay：0.1s; }
.stagger-list li：nth-child（2）{animation-delay：0.2s; }
.stagger-list li：nth-child（3）{animation-delay：0.3s; }
.stagger-list li：nth-child（4）{animation-delay：0.4s; }
.stagger-list li：nth-child（5）{animation-delay：0.5s; }

これにより、各アイテムは次第に長い遅延を與え、きれいなずらした入り口を作り出します。

？ transform使用して、スケーリングやスライドなどのより動的な効果を得ることができます。

？方法2：CSSカスタムプロパティを使用した動的なずらし

より柔軟性（特に多くのアイテムを使用する）については、CSS変數(shù)を使用して遅延を計算します。

 .stagger-listli {
   -  delay：calc（var（ -  i、1） * 0.1s）;
  不透明：0;
  アニメーション：Fadein 0.5s ease Forwards var（ -  delay）;
}

次に、htmlの各<li>でset --i ：

 <li style = "-i：1"> item 1 </li>
<li style = "-i：2"> item 2 </li>
<li style = "-i：3"> item 3 </li>
<li style = "-i：4"> item 4 </li>
<li style = "-i：5"> item 5 </li>

これで、タイミングマルチプラーを簡単に変更したり、他の場所でパターンを再利用できます。

proのヒント

<li>遅延を微妙に保ちます：アイテム間の0.1sから0.2秒は通?；椁艘姢à蓼埂?/li><li> animation-fill-modeでforwards使用して、アニメーション後に要素が表示されるようにします。<li>創(chuàng)造的な効果を得るために、 opacity 、 transform 、またはclip-pathと組み合わせてください。<li>応答性のあるレイアウトについては、長い待機を避けるために、モバイルの遅延を減らすことを検討してください。

?ボーナス：リバーススティガー（最初から最後まで）

最後から計算して順序を逆にします。

 .stagger-listli {
  -TOTAL：5; / *合計アイテム */
  -Reverse-Delay：calc（（var（ -  total） -  var（ -  i）） * 0.1s）;
  アニメーション：Fadein 0.5s ease Forwards var（ -  reverse-delay）;
}

これで、最後のアイテムが最初にアニメーション化されます。

基本的に、ずらされたアニメーションは、まさに制御されたタイミングです。 :nth-child()またはcss変數(shù)を使用するかどうかにかかわらず、アイデアは同じです。各アニメーションをわずかにオフセットします。 2番目の方法はスケーリングを改善し、動的コンテンツで管理しやすいです。

複雑ではありません - タイミングと緩和に注意を払って、それを滑らかに保つことです。

以上がCSSを使用してずらしたアニメーション効果を作成する方法は？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。