カスタムプロパティを使用して、キーフレームアニメーションのバリエーションを絞り込みます

CSSカスタムプロパティを使用して、プリプロセッサを必要とせずにキーフレームアニメーションのバリエーションを柔軟に制御します！この記事では、CSSとカスタムプロパティを使用する方法については、キーフレームアニメーションのカスタマイズを実装して、ミックスなどのプリプロセッサを使用してもたらされる追加の依存関係を回避します。

プリプロセッサに頼らずにCSSアニメーションキーフレームをカスタマイズする方法を疑問に思ったことはありますか？私はしばしばこれのためにプリプロセッサに頼りますが、この依存関係を取り除くことができれば、ネイティブCSSを使用する方が良いでしょうか？

CSSカスタムプロパティのおかげで、CSSだけでキーフレームアニメーションバリアントの制御を実現できることがわかります。 CSSキーフレームの仕組みと、CSSとカスタムプロパティを活用してそれらを強化する方法を掘り下げましょう。

CSSアニメーション継承メカニズム

要素にアニメーションを適用すると、期間や遅延などのプロパティをカスタマイズできます。簡単な例をご覧ください。2つのクラスがあります。Walkと.runはどちらも同じアニメーション（呼吸という名前）を使用しますが、.Runのアニメーション実行速度は.Walk（0.5sと2s）よりも高速です。

 <code>@keyframes breath { from { transform: scale(0.5); } to { transform: scale(1.5); } } /* 两者共享相同的动画，但行走比奔跑慢*/ .walk { animation: breath 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

アニメーションが再利用されるたびに、その動作は、割り当てるプロパティによって異なります。したがって、アニメーションの動作は、適用される要素から継承されると言えます。

しかし、アニメーションのルール（この例のスケーリング比）をどのように処理する必要がありますか？ブレスアニメーションの例に戻る：.walkクラスはゆっくりと呼吸のアニメーションを実行しますが、より大きなスケーリング比を必要とするため、.runクラスはより小さく頻繁なスケーリングの変更を採用している間、スケーリング値を.runクラスよりも大きく設定する必要があります。

純粋なCSSでは、元のアニメーションをコピーして、クラス内の値を直接調整することが一般的です。

 <code>@keyframes breath { /* 与之前相同... */ } /* 与breath类似，但缩放比例不同*/ @keyframes breathDeep { from { transform: scale(0.3); } to { transform: scale(1.7); } } .walk { animation: breathDeep 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

このアプローチは機能しますが、より良い解決策は、アニメーションのプロパティと値を同時に再利用することです！それをする方法は？ CSS変数の継承メカニズムを使用してください！それを実装する方法を見てみましょう：

 <code>/* breath动画的行为基于继承的CSS变量值*/ @keyframes breath { from { transform: scale(var(--scaleStart)); } to { transform: scale(var(--scaleEnd)); } } .walk { --scaleStart: 0.3; --scaleEnd: 1.7; animation: breath 2s alternate; } .run { --scaleStart: 0.8; --scaleEnd: 1.2; animation: breath 0.5s alternate; }</code>

かっこいいですか？これで、繰り返されるアニメーションを書くことなく、同じアニメーションから異なる効果を得ることができます！

さらに一歩進む必要がある場合は、javaScriptを使用してCSSカスタムプロパティを更新することもできます。これは、ルート変数だけでなく、特定の要素の変数も更新することもできます。 CSSアニメーションのネイティブの最適化を失うことなく、JavaScriptを使用してより効率的なアニメーションを作成できるため、これは非常に強力だと思います。これは双方にとって有利な状況です！

以上がカスタムプロパティを使用して、キーフレームアニメーションのバリエーションを絞り込みますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。