【CSS】「transition-property」プロパティについて解説！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「transition-property」プロパティの使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

「transition-property」を使うとアニメーションを付ける際の細かい設定が可能となります。

また、下の動画でもCSSの「transition-property」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「transition-property」を使うと何ができるのか？

.box {
    background-color: skyblue;
    width: 300px;
    height: 300px;
    transition-duration: 0.6s;
    transition-property: width;
}

.box:hover {
    background-color: pink;
    width: 500px;
}

CSSの「transition-property」プロパティを使うと、「transition関連のプロパティ」を適用するプロパティの指定をすることができます。

また、CSSのプロパティに個別に「トランジション関連のプロパティ」の設定をする際によく使われます。

なので「0.6秒間」かけて「width」の値が「300px」から「500px」へと移り変わっていますね。それに対して、「background-color」プロパティは、「transition-duration」の効果が効いていないのが確認できるかと思います。

.box {
    transition-property: width, background-color;
}

「background-color」にも適用するには、こんな感じでプロパティ名を「,」カンマ区切りで追加してあげればOKです。

「transition-property」の使い方！

「transition-property」の使い方を丁寧にまとめますね！

わーい！

「transition-property」に指定できる値は？

「transition-property」に指定できる値には下記のようなものがあります。

• all（初期値）
• none
• CSSのプロパティ名

これらがありますね。

all（初期値）を使うと！

.box {
    transition-property: all;
}

「transition-property」に「all」（初期値）を指定すると、全てのCSSプロパティに「transition関連のプロパティの効果」を適用することができます。

なので、個別に分けて「transition効果」の指定をするのでなければ、特に意識しなくてもOKなプロパティであると思います。

「none」を使うと！

.box {
    transition-property: none;
}

「transition-property」に「none」を使うと、「トランジション関連のプロパティ」は、どのCSSプロパティにも適用されません。

なので全ての「トランジション関連のプロパティ」を無効化できる感じです。

全ての「トランジション関連のプロパティ」を無効化したい場合に、いちいちコメント化しなくてもいいので、その辺で役に立つと思います。

「CSSのプロパティ名」を使うと！

.box {
    transition-property: background-color;
}

「transition-property」に「CSSのプロパティ名」を使うと、そのプロパティにだけ「トランジション効果」を適用することができます。

特定のプロパティにだけ「トランジション効果」を適用したい場合や、「transition-duration」などの「トランジション関連のプロパティ」をCSSのプロパティに個別に設定したい場合に役立ちます。

「,」カンマ区切りで複数の値が書ける

.box {
    transition-property: width, height, background-color;
}

「,」カンマ区切りで複数のCSSのプロパティに「トランジション効果」を適用することができます。

「all」を使うのではなく、個別に書いておくことで、「transition-duration」などのプロパティの値に個別の値を指定することができます。例えば、「width」は「1秒間」かけて遷移させて、「height」には「2秒間」かけて遷移させる、などです。これについての詳しい指定方法は後述しています。

「トランジション関連のプロパティ」を個別に設定する方法！

.box {
    transition-property: width, height, background-color;
    transition-duration: 1s, 2s, 3s;
}

「個別のCSSのプロパティ」に「トランジション関連のプロパティ」を分けて設定するには、「transition-property」に指定した順番を使います。

上のコードだと、「transition-duration」の値は

「width」に「1s」

「height」に「2s」

「background-color」に「3s」

というような指定になります。

このように「transition-property」に書いた順番と、他の「トランジション関連のプロパティ」に書く順番を対応させればOKです！

参考リンク！

仕様書。
https://drafts.csswg.org/css-transitions/#transition-property-property

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/transition-property

おすすめの再生リスト！

まとめ！

CSSの「transition-property」プロパティを使うと、「transition関連のプロパティ」を適用するプロパティの指定をすることができる。

CSSのプロパティに個別に「トランジション関連のプロパティ」の設定をする際によく使われる。

「transition-property」に指定できる値には下記のようなものがある。

• all（初期値）
• none
• CSSのプロパティ名

「,」カンマ区切りで複数の値が書ける。

「個別のCSSのプロパティ」に「トランジション関連のプロパティ」を分けて設定するには、「transition-property」に指定した順番を使う。

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でもCSSの「transition-property」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！