transition(トランジション)は変化するまでの時間を設定するプロパティです。
transitionプロパティの値に下記の順番で各値を指定します。
- transition-propertyの値:効果を適用するプロパティ名を指定(all,none,プロパティ名)
- transition-durationの値:変化に掛かる時間を指定(0,1s)
- transition-timing-functionの値:変化のタイミングを指定(ease,linear,ease-in,ease-out,ease-in-out,cubic-bezier(数値, 数値, 数値, 数値))
- transition-delayの値:変化がいつ始まるかを指定(0,1s)
各値は半角スペースを空けて連続で記述します。
セレクタ名 {
transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;
}
transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;
}
表示できるブラウザ
IE10以上から対応
参考にさせていただきました。
http://www.htmq.com/css3/transition-property.shtml