CSS遷移を制御するために使用できるさまざまなプロパティ（たとえば、遷移プロパティ、遷移期間、遷移 - タイミング機能、遷移遅延）を説明します。

トランジションプロパティを使用して、どのCSSプロパティが移行する必要があるかを指定するにはどうすればよいですか？

transition-property CSSプロパティは、遷移効果を適用するCSSプロパティの名前を指定するために使用されます。これにより、変更が発生したときにどのプロパティがアニメーション化するかを制御できます。使用方法は次のとおりです。

• 単一のプロパティ：単一のプロパティを移行する場合は、単にプロパティ名を宣言します。たとえば、 background-colorを移行するには、次のことを書きます。

   <code class="css">.element { transition-property: background-color; }</code>

• 複数のプロパティ：コンマで分離することにより、複数のプロパティに遷移を適用することもできます。たとえば、 background-colorとwidth両方を移行したい場合は、次のことを書きます。

   <code class="css">.element { transition-property: background-color, width; }</code>

• すべてのプロパティ：アニメーション化できるすべてのプロパティに遷移効果を適用するには、キーワードをall使用します。これはtransition-propertyが指定されていない場合のデフォルト値です。

   <code class="css">.element { transition-property: all; }</code>

• なし：特定の要素の遷移を無効にしたい場合は、 transition-propertyをnoneに設定できます。

   <code class="css">.element { transition-property: none; }</code>

CSSトランジションにかかる時間を制御するために、遷移期間を調整する方法は何ですか？

transition-durationプロパティを使用すると、CSS遷移の期間、つまり遷移アニメーションが完了するまでにかかる時間を制御できます。これがそれを調整する方法です：

• 時間値： sまたはミリ秒（ ms ）を使用して期間を指定できます。たとえば、2秒の遷移期間を設定するには、次のことを書きます。

   <code class="css">.element { transition-duration: 2s; }</code>

  または、500ミリ秒の期間の間：

   <code class="css">.element { transition-duration: 500ms; }</code>

• 複数の期間：複数のプロパティが移行している場合、それぞれに異なる期間を割り当てることができます。期間は、コンマで区切られたtransition-propertyにリストされているプロパティと同じ順序である必要があります。例えば：

   <code class="css">.element { transition-property: background-color, width; transition-duration: 1s, 2s; }</code>

  これによりbackground-color 1秒で2秒でwidthを遷移します。

• デフォルトの期間： transition-durationを指定しない場合、デフォルトは0sになります。つまり、遷移が即座に発生し、アニメーションが表示されません。

遷移ティミング機能を使用して、その期間中のCSS遷移の速度を変える方法を説明できますか？

transition-timing-functionプロパティは、遷移効果の速度曲線を定義し、遷移がその期間にわたってどのように進行するかを制御できるようにします。使用方法は次のとおりです。

• 事前定義されたタイミング関数： CSSは、直接使用できるいくつかの事前定義されたタイミング関数を提供します。

  • ease （デフォルト）：ゆっくりと起動し、中央を介して加速し、最後に遅くなります。
  • linear ：遷移は、最初から最後まで一定の速度で進行します。
  • ease-in ：ゆっくりと起動してから、最後までスピードアップします。
  • ease-out ：迅速に開始し、最後に向かって遅くなります。
  • ease-in-out ：ゆっくりと開始し、中央でスピードアップし、最後に再び遅くなります。

  たとえば、 ease-inタイミング関数を使用するには：

   <code class="css">.element { transition-timing-function: ease-in; }</code>

• CubicBézier関数：さらにコントロールするには、CubicBézier関数を使用できます。これらは、4つの制御ポイント（P0、P1、P2、P3）で定義され、P0とP3はそれぞれ常に（0、0）と（1、1）です。 P1とP2を指定します。例えば：

   <code class="css">.element { transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }</code>

  これにより、ニーズに合わせて調整できるカスタムタイミング関数が作成されます。

• ステップ関数：ステップ関数を使用して、スムーズではなく離散ステップで進行する遷移を作成することもできます。例えば：

   <code class="css">.element { transition-timing-function: steps(4, end); }</code>

  これにより、遷移が4つの等しいステップに分割され、各ステップの終了時に変更が発生します。

CSS遷移を制御するために使用できるさまざまなプロパティ（例、遷移プロパティ、遷移期間、遷移 - タイミング機能、トランジション解雇）を説明します。

CSS遷移により、特定の期間にわたってプロパティ値をスムーズに変更することができます。これらを制御するために使用される重要なプロパティは次のとおりです。

• Transition-Property：このプロパティは、変更が発生したときにどのCSSプロパティが遷移するかを指定します。 1つ以上のプロパティをリストしたり、 all使用してすべてのアニメーション可能なプロパティを遷移させるか、移行を無効にするnoneがありません。

  例：

   <code class="css">.element { transition-property: background-color, width; }</code>

• 遷移期間：このプロパティは、移行アニメーションが完了するまでにかかる時間の長さを設定します。秒sまたはミリ秒（ ms ）で期間を指定でき、複数のプロパティに異なる期間を設定できます。

  例：

   <code class="css">.element { transition-duration: 1s, 2s; }</code>

• 遷移 - 整理機能：このプロパティは、遷移効果の速度曲線を定義し、遷移がその期間にわたってどのように進行するかを制御します。 ease 、 linear 、 ease-in 、 ease-out 、 ease-in-out 、またはカスタムキュービックベジエ関数やステップ関数などの事前定義された関数を使用できます。

  例：

   <code class="css">.element { transition-timing-function: ease-in-out; }</code>

• トランジションデレイ：このプロパティは、遷移効果が開始される前に遅延を指定します。 sまたはミリ秒（ ms ）で遅延を設定できます。複数のプロパティが移行している場合は、それぞれに異なる遅延を設定できます。

  例：

   <code class="css">.element { transition-delay: 0.5s, 1s; }</code>

これらのプロパティは、利便性のために速記のtransitionプロパティに結合することができます。例えば：

 <code class="css">.element { transition: background-color 1s ease-in-out 0.5s, width 2s linear 1s; }</code>

この速記はbackground-color 1秒以上にわたって遷移し、 ease-in-outタイミング関数と0.5秒の遅延で遷移しますが、 width linearタイミング関数と1秒の遅延で2秒以上遷移します。

以上がCSS遷移を制御するために使用できるさまざまなプロパティ（たとえば、遷移プロパティ、遷移期間、遷移 - タイミング機能、遷移遅延）を説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。