カスタム CSS プロパティをスムーズにアニメーション化するにはどうすればよいですか?

CSS でのカスタム プロパティのアニメーション化

複数の内部 div を同期的にアニメーション化することを目的として、開発者は CSS 変数を使用しようとしましたが、問題が発生しました。 CSS 変数はアニメーションで利用できますが、問題はスムーズな補間ではなく突然の遷移という予期せぬ動作にあります。

解決策には、アニメーション化される変数のタイプを定義する @property ルールを利用することが含まれます。この場合、不透明度は数値として指定され、ブラウザーがそれを認識し、段階的なアニメーションを促進できるようにします。

コード例:

@property --opacity {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

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

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

Inこの例では、不透明度変数が数値として明示的に定義されており、fadeIn アニメーション プロパティは CSS 変数を使用して、HTML 上で望ましい段階的なトランジション効果を実現しています。要素の背景の不透明度。

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