今回はtransitionでプロパティ（transition-property）を複数指定したいときの書き方を解説します。
transition-propertyを複数指定するときの書き方
結論から言うと以下のような書き方になります。
.btn {
/* プロパティ→秒数の順番でカンマ区切りで指定 */
transition: opacity 300ms, color 300ms;
color: #333;
}
.btn:hover {
color: #fff;
opacity: 0.8;
}プロパティごとに毎回秒数を指定する必要がある点に気をつけましょう。「秒数が同じだから省略」とかはできません。
大体の場合はtransitionをかけるプロパティと秒数だけ指定すれば事足りると思うので、上のような書き方でokです。
transitionをショートハンドで書くときの書き方
transitionをショートハンドで書く場合、以下のような順番になります。（）内はデフォルト値です。
- transition-property（all）
- transition-duration（0）
- transition-timing-function（ease）
- transition-delay（0）
そして重要なのがtransition-propertyとtransition-durationですね。
transition-propretyにはtransitionをかけたいCSSプロパティを指定します。CSSプロパティは普通にそのまま書けばokです。
省略した場合はallがデフォルト値なので勝手に全プロパティにtransitionがかかります。
/* 全プロパティにtransition（allが補完される） */
.btn1 {
transition: 300ms;
}
/* 1つだけ指定 */
.btn2 {
transition: opacity 300ms;
}
/* 複数指定 */
.btn3 {
transition: opacity 300ms, background-color 500ms;
}
ただし、transition-propertyを省略すると意味わからないバグに繋がることが結構よくあるので、必ず毎回指定するようにしてください（マジで結構あります）。
特にChromeではずっと前から「ページ読み込み時にtransitionが勝手に発火する」というバグがあります。
transition-propertyを指定すればある程度回避できますが、面倒だからといって省略するとページ読み込み時にtransitionがちらついたりします。
こういうバグを回避する意味でも必ず指定するようにしてください。
また、transition-durationではアニメーションする秒数を指定します。単位は「秒（s）」か「ミリ秒（ms）」で指定できます。
「1000ms = 1s」、「300ms = 0.3s」って感じですね。どちらでもokです。
まとめ
transitionでプロパティを複数指定したい時はプロパティごとに秒数を決める必要があります。
また、transition-propertyを省略していると思わぬバグに繋がることがあるので必ず指定するように気をつけましょうね。
