アニメーションの構成と色の混合

css色の混合アニメーション：animation-composition

の魅力を探ります ますます人気のある機能により、CSSの色の混合が非常に簡単になりました。 2つの色の値（任意の色の値）を渡すだけで、オプションでスケールを設定します。

color-mix()

相対色の構文を使用して、異なる色空間の間の色を操作して変更することもできます。主なユースケースは、透明性をサポートしない色の値（名前付き色など）に透明性を追加することです。

background-color: color-mix(#000 30%, #fff 70%);

もちろん、2つの不透明な要素を重ね合わせるなど、いくつかの「ハック」メソッドも使用できます。または、

を使用して同様の効果を達成します。

background-color: hsl(from black h s l); /* hsl(0 0% 0%) */
background-color: hsl(from black h s l / 50%); /* hsl(0 0% 0% / 50%) */

別のアプローチは、ライアンによるAlmanac Animationプロパティへの最近の更新に由来しています。誰もが知っているように、mix-blend-modeは他の多くのプロパティの略語です（順序は常に覚えておくのが難しいです）。ロイアンが説明するように機能するプロパティの1つは

です。

animation CSS属性の定義は、属性の「ベース」値も設定します。デフォルトでは、キーフレームアニメーションは、アニメーションで定義されている効果値のみを考慮するため、基礎となる値を無視します。キーフレームは、ブラウザにアニメーションが表示される順序を決定する効果値スタックを作成します。複合操作は、CSSが基本効果とキーフレーム効果値の組み合わせを処理する方法です。 animation-composition

マヌエル・マチュゾヴィッチとロビン・ランドルもこの財産について素晴らしい説明を持っているので、アルマナックを更新するようになりました。

ベース属性値を置き換える3つの値をサポートするか、ベース属性値でオーバーレイまたは蓄積操作を実行します。その中で、「追加」値は最も興味深いものです。

[キーフレームの効果値をベース

属性値と組み合わせて、新しい色を作成します。 animation-composition

例を見てみましょう：

background-colorご覧のとおり、「追加」値は、2つの色の間を遷移するときにそれらを混合します。この遷移は「交換」値よりもはるかに滑らかであることに注意してください。ただし、100％マークで取得することは、キーフレームで宣言するものではなく、まったく新しい色であることに注意してください。いつでもアニメーションを一時停止した場合、新しい色の値を抽出できますか？

ライアンはこのアニメーションを設計し、要素の上にホバリングするとアニメーションが一時停止します。 devtoolsを開いて 興味深いことに、RGB変換がいくつかありました。これは、おそらく、1ヘクスの色を別の1ヘクスの色に変換するよりも簡単なのでしょうか？ブラウザはスマートなことをします。

今すぐ古い色の補間のデモを更新したい...

:hoverまあ、それは私の意見では違いはありません。たぶんそれは、HSLの色相チャネルを変更したからといって、変更は非常に微妙です。とにかく、

は新しい計算された色の値を生成できます。これらの値は何をする必要がありますか？私にはわかりませんが、あなたの想像力を最大限に活用してください！

以上がアニメーションの構成と色の混合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。