| transition: 「変化させるプロパティ名」 「変化完成までの時間」 「変化の仕方」 「変化開始時間」; |
| all （初期値） | すべてのプロパティの変化に対応 |
| プロパティ名 | 指定したプロパティの変化に対応 |
| none | どのプロパティも変化しない |
| 0s （初期値） | すぐに変化開始 |
| 任意の数値 + s または 任意の数値 + ms | sは秒を示し、msはミリ秒を示します |
| ease （初期値） | 開始と終了付近がなめらかに cublic-bezier(0.25,0.1,0.25,1)と同じ |
| linear | 直線的に変化 cublic-bezier(0,0,1,1)と同じ |
| ease-in | 変化スタート付近が緩やか cublic-bezier(0.42,0,1,1)と同じ |
| ease-out | 変化終わり付近が緩やか cublic-bezier(0,0,0.58,1)と同じ |
| ease-in-out | 変化スタートと終わり付近が緩やか cublic-bezier(0.42,0,0.58,1)と同じ |
| cubic-bezier() | 三次ベジェ曲線関数 cubic-bezier(X1,Y1,X2,Y2)のように指定 X1とX2は0以上1以下 |
| step-start | 変化の開始の瞬間に終了の状態になる |
| step-end | 変化終了の時間まで開始の状態のままで、 変化終了の時間になると変化完了状態になる |
| steps() | steps(「区切りの数（整数）」 「変化の仕方のキーワード」;)
区切りの数だけ分割されて一気に変化します（0→25→50 といった感じ） 変化の仕方のキーワードは以下の通り
|
| 0s （初期値） | すぐに変化開始 |
| 任意の数値 + s または 任意の数値 + ms | sは秒を示し、msはミリ秒を示します |
/*↓p要素にマウスオーバーさせたときの変化例*/
p:hover{transition: 「変化させるプロパティ名」 「変化完成までの時間」 「変化の仕方」 「変化開始時間」;
「変化させるプロパティ名」:「変化内容」;
}