Chapter 02無料公開

transition プロパティについて

7968
7968
2021.07.18に更新

transition(トランジション)は、直訳すると変化や移り変わりという意味です。
変化するまでの時間を設定するプロパティです。
transition は、ショートハンドプロパティを含め 5 つのプロパティがあります。
ショートハンドプロパティの transition で一括て指定することも出来るし、それぞれのプロパティで個別に指定することもできます。

No プロパティ名 読み方 説明
01 transition-duration トランジション・デュレーション 変化が始まって終わるまでの時間を指定します。
02 transition-property トランジション・プロパティ 変化が適用される CSS のプロパティを指定します。
03 transition-timing-function トランジション・タイミング・ファンクション 変化の度合いを指定します。
04 transition-delay トランジション・ディレイ 変化が始まる時間を指定します。
05 transition トランジション 上記の 4 つのプロパティを一括で指定できる、ショートハンド・プロパティです。

それぞれプロパティを見ていきましょう。