複数の CSS カスタム プロパティを使用してスムーズなアニメーションを実現するにはどうすればよいですか?

スムーズなアニメーションのための CSS カスタム プロパティの使用

カスタム CSS プロパティを使用して複数の要素を同時にアニメーション化しようとすると、スムーズな遷移ではなく突然プロパティが変更されるという問題が発生することがよくあります。この記事では、望ましいアニメーション効果を実現するためのソリューションについて詳しく説明します。

アニメーション内の値を補間しない変数に依存するよりも、より効果的なアプローチは、@property を使用して定義された CSS プロパティを利用することです。このメソッドにより、プロパティ タイプの明示的な宣言が可能になり、ブラウザが --opacity などのプロパティを数値として正確に解釈してアニメーション化できるようになります。

実装例

この手法を使用するには、次のコードを考慮してください:

@property --opacity {
  syntax: '<number>'; /* Declaring type as 'number' for transition */
  initial-value: 0;
  inherits: false;
}

@keyframes fadeIn {
  50% { --opacity: 1 }
}

html {
  animation: 2s fadeIn infinite;
  background: rgba(0 0 0 / var(--opacity));
}

この例では、 --opacity カスタム プロパティタイプ「number」の @property として定義されます。これにより、ブラウザは --opacity を数値として認識し、アニメーション中にスムーズに補間できるようになります。フェードイン キーフレーム アニメーションは、-opacity を 0 から 50% の時点で 1 に徐々に増加させ、その結果、HTML 要素の背景色のスムーズなフェードイン効果が得られます。

以上が複数の CSS カスタム プロパティを使用してスムーズなアニメーションを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。