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

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

CSS では、CSS 変数とも呼ばれるカスタム プロパティは、スタイルを定義して再利用するための堅牢なメカニズムを提供します。プロジェクト全体を通しての価値観。これらは、事前定義された値または変数に基づいてスタイル プロパティを動的に変更する機能を提供します。ただし、アニメーションに関しては、カスタム プロパティが問題を引き起こすことがあります。

そのような問題の 1 つは、単一のアニメーションを使用して特定のプロパティの複数のインスタンスをアニメーション化しようとすると発生します。開発者は、カスタム プロパティを活用することで、後続のすべてのインスタンスが同じアニメーションの影響を受けるようにすることを目指しています。ただし、場合によっては、1 つのインスタンスだけが目的のアニメーションを実行し、残りのインスタンスは影響を受けません。

アニメーションのカスタム プロパティについて

この問題は基本的な問題に起因します。アニメーションにおけるカスタム プロパティの動作。従来の CSS 構文を使用して定義された場合、カスタム プロパティはアニメーション中に静的な値として扱われます。これは、プロパティ値がアニメーション期間中に補間されず、段階的な遷移ではなく突然の変化をもたらすことを意味します。

解決策: @property ルールを使用する

この制限を克服するために、開発者は @property ルールをカスタム プロパティと組み合わせて使用​​できます。 @property ルールを使用すると、変数の型を指定し、初期値を指定することで変数を定義できます。たとえば、カスタム プロパティを数値として宣言すると、ブラウザはプロパティを数値として解釈し、スムーズな遷移やアニメーションを有効にすることができます。

実装例:

次の例を考えてみましょう。ここでは、カスタム プロパティを使用して点滅する div 要素を作成することを目的としています。 opacity:

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

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

#test {
  width: 100px;
  height: 200px;
  background-color: black;
  animation: fadeIn 1s infinite;
}

#test div {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  opacity: var(--opacity);
}

このアプローチを使用すると、カスタム プロパティ --opacity が数値として定義され、アニメーションがアニメーションの継続時間にわたってスムーズに不透明度の値を補間し、目的の点滅効果を実現できるようになります。

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