「transition」プロパティは、
「HTML」タグに指定された「CSS」プロパティの値を、動的に変更することができる「CSS」プロパティ。

「transition」プロパティは、
・transition-property
・transition-duration
・transition-timing-function
・transition-delay
の一括指定プロパティです。

Webに動きのある要素を加えることができ、
ユーザーのアクションなどに合わせて、
部分的にサイズ変更したり、
カラーを変えたり、
動かしたりすることができるプロパティです。

Back

「transition」プロパティの書式

「transition」プロパティの書式は、
「一括指定」と「個別指定がある。

書式

transition: プロパティ名時間時間関数遅延;

複数指定の書式

transition: プロパティ名時間時間関数遅延, プロパティ名時間時間関数遅延;

プロパティ名 | 時間

transition: margin-right 4s; transition: margin-right 4s, color 1s;

変化するすべてのプロパティへの適用

transition: all 0.5s ease-out;

トランジション効果を適用する「CSS」プロパティを指定する。

transition-property: CSSのプロパティ名;
transition-property: all;
transition-property: left;
transition-property: witdh;

トランジション終了までの時間を指定する。

transition-duration: 2s;
トランジション終了までの時間を指定する。
「秒数（s）」「ミリ秒数（ms）」単位で指定可能。
既定値は「0s」だが、トランジションが実行されないので設定が必要。

トランジション効果を適用する「CSS」プロパティの中間状態の値を算出する方法を設定する。

transition-timing-function: ease-out;

トランジション効果がスタートするまでの待ち時間を指定できる。

transition-delay: 1s;

「transition」プロパティの種類

プロパティ名	説明
transition-property	トランジション効果を適用する「CSS」プロパティを指定する。
transition-duration	トランジション終了までの時間を指定する。「秒数（s）」「ミリ秒数（ms）」単位で指定可能。既定値は「0s」だが、トランジションが実行されないので設定が必要。
transition-timing-function	トランジション効果を適用する「CSS」プロパティの中間状態の値を算出する方法を設定する。
transition-delay	トランジション効果がスタートするまでの待ち時間を指定できる。

書式

transition: プロパティ名時間時間関数遅延;

複数指定の書式

transition: プロパティ名時間時間関数遅延, プロパティ名時間時間関数遅延;

プロパティ名 | 時間

transition: margin-right 4s; transition: margin-right 4s, color 1s;

プロパティ名 | 時間 | 遅延

transition: margin-right 4s 1s;

プロパティ名 | 時間 | 時間関数

transition: margin-right 4s ease-in-out;

プロパティ名 | 時間 | 時間関数 | 遅延

transition: margin-right 4s ease-in-out 1s;

変化するすべてのプロパティへの適用

transition: all 0.5s ease-out;

Back

「transition-timing-function」プロパティの設定値の種類

プロパティ名

初期値

説明

ease

デフォルトの値。
cubic-bezier(0.25, 0.1, 0.25, 1.0) と同じ。
トランジションの中央に向けて変化量が増加し、最後に向けて減少する。

linear

cubic-bezier(0.0, 0.0, 1.0, 1.0) と同じ。
等しい速度でトランジションが再生される。

ease-in

cubic-bezier(0.42, 0, 1.0, 1.0) と同じ。
トランジションの再生は、変化速度がゆっくり始まり、終了まで加速する。

ease-out

cubic-bezier(0, 0, 0.58, 1.0) と同じ。
トランジションは、速く始まり、速度を落としながら終了する。

ease-in-out

cubic-bezier(0.42, 0, 0.58, 1.0) と同じ。
トランジションは、ゆっくり変化しながら速度を上げ、速度を落として終了する。

cubic-bezier(p1, p2, p3, p4)

ユーザーが自由に定義できる値。
二次元ベジェ曲線の値を変化させることで、トランジションを構成する。
設定値の「p1」と「p3」の値は、「0」から「1」の間で設定する必要がある。

steps(n, <jumpterm>)

停止点の数を指定することができる値。

指定した停止点では、指定した「jumpterm」の方法でそれぞれ一定時間停止する。

jump-start	トランジションの開始時に最初のジャンプが発生する。
jump-end	トランジションの終了時に最後のジャンプが発生する。
jump-none	どちらにもジャンプなないが、「0%」と「100%」の両方で、それぞれ「1/n」の間隔を保持される。
jump-both	「0%」と「100%」の両方を含んで停止点を構成し、トランジションの反復中に効果的にステップを追加する。
start	jump-start と同じ。
end	jump-end と同じ。

step-start

steps(1, jump-start) と同じ。

step-end

steps(1, jump-end) と同じ。

Back