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

WBOY
リリース: 2023-10-20 14:21:47
オリジナル
1229 人が閲覧しました

CSS 过渡属性详解:transition-timing-function 和 transition-delay

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

Web ページやアプリケーションの開発プロセスでは、トランジション効果を使用することがよくあります。 、要素のスタイル属性を変更することで、スムーズなアニメーション効果を実現します。 CSS は一連のトランジション プロパティを提供します。そのうちの 2 つの非常に重要なプロパティは、transition-timing-functiontransition-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 ピクセルにスムーズに移行し、移行アニメーションの速度が最初は速くなり、次に遅くなります。

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!