CSS 変数がアニメーションしないのはなぜですか?

CSS カスタム プロパティ/変数をアニメーション化する

CSS 変数を使用して一連の内部 div をアニメーション化しようとして、開発者は困難に直面しました。 @keyframes を利用してアニメーションを定義しているにもかかわらず、結果は静的なブラック ボックスのままです。

解決策: @property を使用する

この問題を解決するには、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));
}

この例では、@property は --opacity を次のように定義します。数字。フェードイン アニメーション内では、不透明度プロパティが徐々に増加し、50% の時点で 1 になります。その後、HTML 要素の背景色は --opacity 変数に基づいて半透明の黒にスムーズに移行します。

以上がCSS 変数がアニメーションしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。