CSS トランジション プロパティの詳細な説明:transition-timing-function とtransition-delay

CSS トランジション プロパティの詳細な説明:transition-timing-function とtransition-delay

Web ページやアプリケーションの開発プロセスでは、トランジション効果を使用することがよくあります。 、要素のスタイル属性を変更することで、スムーズなアニメーション効果を実現します。 CSS は一連のトランジション プロパティを提供します。そのうちの 2 つの非常に重要なプロパティは、transition-timing-function と transition-delay で、トランジションの時間と速度を制御するのに役立ちます。 。

1. transition-timing-function
   transition-timing-functionこのプロパティは、トランジション効果の時間曲線を指定するために使用されます。デフォルトでは、トランジション効果は線形です。つまり、一定の速度で変化します。ただし、このプロパティを使用して、ニーズに合わせて遷移の速度を変更することができます。

transition-timing-functionこの属性は次の値を受け入れることができます:

• ease: デフォルト値。低速で開始し、その後速度を上げ、その後低速で終了します。
• イーズイン: ゆっくりとした速度から始めて、その後速度を上げます。
• ease-out: 速く始めて、その後速度を落とします。
• easy-in-out: 低速で開始し、その後速度を上げ、最後に低速まで減速します。
• linear: 変化は均一で、加速または減速の影響はありません。
• cubic-bezier(n,n,n,n): 4 つの制御点の座標によって定義される時間曲線をカスタマイズできます。

以下は、さまざまな transition-timing-function 値の効果を示すサンプル コードです。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease-out;
}

.box:hover {
  width: 300px;
}

上記のコードでは、マウスがホバーされているとき.box 要素上では、幅が 100 ピクセルから 300 ピクセルにスムーズに移行し、移行アニメーションの速度が最初は速くなり、次に遅くなります。

2. transition-delay
   transition-delayこの属性は、トランジション効果の開始までの遅延時間を指定するために使用されます。遅延時間を設定することで、トランジション エフェクトがトリガーされるタイミングを制御し、特定の時点で開始するようにすることができます。これは、複数のトランジションを作成し、トランジションを次々にトリガーする要素に便利です。

transition-delayこの属性は、遅延の長さを示す時間値を受け入れることができます。単位は秒 (s) またはミリ秒 (ms) です。

次のサンプル コードは、transition-delay 属性の効果を示しています。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease-in-out 0.5s;
  /* 延迟0.5秒后开始过渡 */
}

.box:hover {
  width: 300px;
}

上記のコードでは、マウスを .box の上に置いたときのコードです。 要素上にある場合、その幅は 100 ピクセルから 300 ピクセルにスムーズに移行し、0.5 秒後に移行効果が開始されます。

2 つの遷移属性 transition-timing-function と transition-delay を使用することで、要素の遷移効果をより正確に制御し、ユーザーにさらに多くの機能を提供できます。優れたインタラクティブな体験。この記事がこれらのプロパティをより深く理解し、適用するのに役立つことを願っています。

以上がCSS トランジション プロパティの詳細な説明:transition-timing-function とtransition-delayの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。