【CSS】transitionにプロパティを複数指定する書き方

transitionのプロパティの複数指定する書き方って知ってる？

CSSのtransitionは、『all』と書く人も多いかも知れませんが、それだと予期せぬ場所で影響が出ることがあります。

なので、transitionのプロパティは個別に指定した書き方がおすすめですが、複数ある場合はどう書いていいか分からない人もいると思います。

そこで今回は、transitionのプロパティを複数指定する書き方を解説していきます。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

CSSのtransitionにプロパティを複数指定する書き方

早速ですが、こちらのサンプル（デモ）をご覧下さい。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

下のボタンをhoverすると、上のボタンが変化します。

そして変化するのは、以下の3つのプロパティになります。

CSSのコード

それでは本題ですが、まず基本となるtransitionのショートハンドの書き方はこちらになります。

そして、上記の順番に書きます。

例えば、全部書いた場合のCSSの書き方は、以下のようになります。

.sample {
  transition: color 1s ease-in 2s;
}

全部書く必要はなく、以下のように省略することも出来ます。

.sample01 {
  transition: 1s;
}

.sample02 {
  transition: color 1s;
}

そして、ここまでは1つのプロパティの書き方なので、複数書く場合は以下のように書きます。

.sample {
  transition: color 1s, background-color 1s;
}

通常の書き方に、『 , 』とカンマで区切ればOKです。

あとは上記のように、時間が同じでも省略せずに書きましょう（それぞれのプロパティに対する設定なので）。

そして今回のサンプル（デモ）の場合はプロパティが3つあり、以下のようになります。

transition: background-color .4s, transform .4s, color .4s;

このように2つ以上の場合でも、書き方は変わりません。

まとめ

今回は、CSSのtransitionプロパティを複数指定する書き方を解説しました。

冒頭でも書いたように、『all』にすると意図しない箇所で変な挙動をしたりバグのようになることがあるので、普段からプロパティを指定するクセを付けるようにしましょう。

実際、『all』と書いたせいでハンバーガーメニューで変な挙動をしたり、スライドショーのライブラリでもバグのようになったことがあります。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！