【CSS Modules】transition-timing-functionプロパティの使い方

transition-timing-functionプロパティは、CSSトランジションにおける変化の速度パターンを定義するプロパティです。これは、ウェブページの要素がある状態から別の状態へ変化する際、時間の経過とともにどのようにその変化が進むか、つまりアニメーションの加速・減速の仕方を指定するために使用されます。例えば、マウスカーソルを合わせたときにボタンの色がじわっと変わる際、その色の変化が最初ゆっくり始まり、途中から速くなり、最後にまたゆっくりになる、といった動きを制御できます。

このプロパティには、いくつかのキーワード値を設定できます。デフォルト値のeaseは、ゆっくり開始し、途中で加速し、最後はゆっくり終わるという、人間が自然と感じる動きを表現します。linearは、最初から最後まで一定の速度で変化します。ease-inはゆっくり開始して徐々に加速し、ease-outは加速した状態からゆっくりと速度を落として終わります。ease-in-outは、ゆっくり開始し、中央で加速して、ゆっくりと終わる動きです。

さらに、cubic-bezier()関数を使用することで、より詳細でカスタムな速度パターンを定義することが可能です。また、steps()関数を用いると、アニメーションを離散的な複数のステップに分割して実行し、コマ送りアニメーションのような効果を作り出すこともできます。

transition-timing-functionプロパティは、transition-property（どのプロパティを変化させるか）、transition-duration（変化にかかる時間）、transition-delay（変化が始まるまでの遅延時間）といった他のトランジション関連プロパティと組み合わせて使用されます。これにより、ウェブ要素にスムーズで魅力的な動きを加え、ユーザーエクスペリエンスを向上させる上で重要な役割を果たします。

Copy
1transition-timing-function: ease;

引数なし

引数はありません

戻り値なし

戻り値はありません