【CSS Modules】linear()関数の使い方
linear()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
linear()関数はCSSのアニメーションやトランジションにおいて、要素の時間経過に伴う変化の速度を定義するために使用される関数です。
この関数は、animation-timing-functionプロパティやtransition-timing-functionプロパティの値として指定することで、対象要素がアニメーションの開始から終了まで、常に一定の速度で変化するように設定します。通常のイージング関数（例えばeaseやease-outなど）がアニメーションの途中で速度を調整するのに対し、linear()は加速や減速を行わず、開始時点から終了時点まで同じペースで変化が進行します。これにより、予測しやすく、ブレのない滑らかな動きを実現できます。
linear()関数は、引数を指定しない場合、またはlinear(0, 1)として指定した場合、0から1までの均一な速度変化を表します。さらに、linear(p1, p2, ...)のように複数の停止点（ストップ）を引数として指定することで、アニメーションの異なる時点において、それぞれ異なる一定速度の区間を連続させることも可能です。例えば、linear(0, 0.2, 0.8, 1)のように指定すると、アニメーションの特定の区間で速度を調整しつつ、各区間内では一定速度を保つといった複雑な動きにも対応できます。
この関数は、等速直線運動のような単純な動きを表現したい場合や、複数のアニメーションを厳密に同期させたい場合に特に有効です。CSSで動きを制御する上で非常に基本的な機能であり、アニメーションの基本を理解する上で重要な要素の一つです。
構文(syntax)
1linear(0, 0.5, 1)
引数(parameters)
[ <number> [ at <percentage> || <length> ] ]#
<number>: グラデーションの開始位置または終了位置を指定する数値。パーセンテージまたは長さで単位を指定できます。at:<number>の位置指定を可能にするキーワード。<percentage>: グラデーションの開始位置または終了位置を親要素のサイズに対する割合で指定するパーセンテージ。<length>: グラデーションの開始位置または終了位置を絶対的な長さで指定する値。
戻り値(return)
linear() 関数は、指定された時間経過に対する値の変化率を一定に保つイージング関数を生成します。この関数は、CSS animations や transitions において、要素の動きや変化が一定の速度で進行するように設定する際に使用されます。