CSSアニメーションを制御するために使用できるさまざまなプロパティ（例えば、アニメーション名、アニメーションデュレーション、アニメーション - タイミング機(jī)能、アニメーションアイテーションカウント、アニメーション対応、アニメーションフィルモードなど）を説明します。

CSSアニメーションは、さまざまなプロパティを通じて制御され、それぞれがアニメーションの異なる側(cè)面を定義します。これらのプロパティの詳細(xì)な説明は次のとおりです。

• Animation-Name ：このプロパティは、アニメーションの動作を定義する@keyframes AT-Ruleの名前を指定します。たとえば、 animation-name: fadeIn; @keyframes fadeIn { ... }で定義されたアニメーションを使用します。
• アニメーション期間：これにより、アニメーションが1つのサイクルを完了するためにかかる時間の長さを設(shè)定します。數(shù)秒またはミリ秒（MS）で指定できます。たとえば、 animation-duration: 3s;アニメーションが3秒間持続することを意味します。
• アニメーション - タイミング機(jī)能：このプロパティは、その期間の1つのサイクルにわたってアニメーションがどのように進(jìn)行するかを定義します。一般的な値には、 ease 、 linear 、 ease-in 、 ease-out 、 ease-in-out含まれます。さらに、Cubic-Bezier関數(shù)を使用して、カスタムタイミング関數(shù)を定義できます。
• Animation-Iteration-Count ：これは、アニメーションを再生する回數(shù)を指定します。 animation-iteration-count: 3; 、またはinfiniteにアニメーションを無期限にループするように設(shè)定します。
• アニメーション方向：このプロパティは、アニメーションが一部またはすべてのサイクルで逆に再生されるかどうかを決定します。値には、 normal 、 reverse 、 alternate 、 alternate-reverseが含まれます。
• Animation-Fill-Mode ：これにより、アニメーションが実行される前後にターゲット要素に適用される値が制御されます?？激à椁欷雮帳?、 none 、 forwards 、 backwards 、およびbothです。 forwards最後のキーフレーム値を保持し、 backwardsはアニメーションが開始される前に最初のキーフレーム値を適用します。

これらのプロパティは、複雑なアニメーションを?qū)g現(xiàn)するために個別にまたは一緒に使用できます。

アニメーション - タイミング機(jī)能を使用して、CSSアニメーションのタイミングと速度を設(shè)定するにはどうすればよいですか？

CSSのanimation-timing-functionプロパティを使用すると、アニメーションのタイミングと速度をその期間にわたって制御できます。このプロパティは、アニメーションの加速曲線を定義し、それが速く始まる速さ、進(jìn)行方法、そしてそれがどのように終わるかに影響します。 animation-timing-functionのいくつかの一般的な値は次のとおりです。

• ease ：これはデフォルト値です。アニメーションはゆっくりと始まり、中央から加速し、最後に向かって遅くなります。これは、立方體ビジエ関數(shù)cubic-bezier(0.25, 0.1, 0.25, 1)で表されます。
• linear ：アニメーションは、最初から最後まで一定の速度で移動します。これはcubic-bezier(0, 0, 1, 1)で表されます。
• ease-in ：アニメーションはゆっくりと始まり、進(jìn)行するにつれてスピードアップします。 cubic-bezier(0.42, 0, 1, 1)で表されます。
• ease-out ：アニメーションは迅速に始まり、最後に向かって遅くなります。 cubic-bezier(0, 0, 0.58, 1)で表されます。
• ease-in-out ：アニメーションはゆっくりと始まり、中央から加速し、最後に向かって再び遅くなります。 cubic-bezier(0.42, 0, 0.58, 1)で表されます。

さらに、4つの數(shù)値をパラメーターとして撮影するcubic-bezier関數(shù)を使用してカスタムタイミング関數(shù)を作成できます。それぞれがアニメーションの曲線を定義するグラフ上のポイントを表します。たとえば、 animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);カスタムカーブを作成します。

これらのタイミング関數(shù)を使用して、アニメーションの速度とタイミングを微調(diào)整して、望ましい視覚効果を?qū)g現(xiàn)できます。

CSSアニメーションでアニメーション方向に異なる値を使用することの効果は何ですか？

CSSのanimation-directionプロパティは、特に繰り返されるように設(shè)定されている場合、アニメーションが再生される方向を制御します。異なる値がアニメーションにどのように影響するかは次のとおりです。

• normal ：これはデフォルト値です。アニメーションは、各サイクルの最初から最後まで前進(jìn)します。アニメーションが複數(shù)回繰り返されると、各サイクルが前方に再生されます。
• reverse ：アニメーションは逆に再生され、終了狀態(tài)から始まり、開始狀態(tài)に戻ります。各サイクルは後方に再生されます。
• alternate ：アニメーションは前方と逆の間に交互になります。偶數(shù)のサイクル（2、4、6など）では、前方に再生され、奇數(shù)サイクル（1、3、5など）では、逆に再生されます。これにより、前後の効果が生まれます。
• alternate-reverse ： alternateに似ていますが、アニメーションは逆に始まります。したがって、奇數(shù)のサイクル（1、3、5など）では、逆に再生され、偶然のサイクル（2、4、6など）では、前方に再生されます。

animation-directionにこれらの異なる値を使用すると、シンプルなループアニメーションからより複雑な振動アニメーションまで、さまざまな視覚効果を作成できます。たとえば、振り子のアニメーションはalternate使用して前後にスイングする場合がありますが、バウンスボールアニメーションはalternate-reverseを使用して現(xiàn)実的なバウンス効果を作成する場合があります。

アニメーションフィルモードが実行前後のCSSアニメーションの動作にどのように影響するかを説明できますか？

animation-fill-modeプロパティは、アニメーションが実行される前後に要素に適用されるスタイルを決定します。ここに異なる値とその効果があります：

• none ：これはデフォルトです。アニメーションは、要素が開始する前または終了後に要素に影響を與えません。要素は、アニメーションが終了した直後に元の狀態(tài)に戻ります。
• forwards ：アニメーションが終了した後、要素はアニメーションの最後のキーフレームによって定義された狀態(tài)に殘ります。これは、要素が消えた後に目に見えるようにするなど、アニメーションの終了狀態(tài)を維持するのに役立ちます。
• backwards ：アニメーションが始まる前に、要素はアニメーションの最初のキーフレームによって定義された狀態(tài)に設(shè)定されます。これは、実際に開始する前にアニメーションの要素を準(zhǔn)備するために使用できます。たとえば、消滅する前に要素を隠すように設(shè)定するなどです。
• both ：これは、 forwardsとbackwardsの効果を組み合わせます。この要素は、アニメーションが開始される前に最初のキーフレームによって定義されたスタイルを使用し、アニメーションが終了した後に最後のキーフレームのスタイルを保持します。

animation-fill-modeを使用することにより、アニメーションの前、最中、後に要素の外観と動作を制御できます。これは、ユーザーインターフェイスアニメーションの継続性を維持したり、要素の異なる狀態(tài)間でシームレスな遷移を作成するために重要です。

以上がCSSアニメーションを制御するために使用できるさまざまなプロパティ（例：アニメーション名、アニメーションデュレーション、アニメーション - タイミング機(jī)能、アニメーションアイテーションカウント、アニメーションダレクション、アニマットを説明することができますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。