CSS カスタム プロパティをアニメーション化して複数の要素を順番に表示/非表示にするにはどうすればよいですか?

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

問題:

CSS カスタム プロパティ (変数) を使用して複数の要素をアニメーション化することはできません。期待どおりに動作しません。望ましい結果は、不透明度を制御する変数を使用して内部 div が順番に表示および非表示になることです。

解決策:

カスタム タイプの 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));
}

この例では、HTML 要素の背景が --opacity に基づいて完全に透明から部分的に不透明にアニメーション化されます。変数。時間の経過とともに徐々に補間されます。

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