【CSS】「transition」プロパティについて解説！【一括指定プロパティ】

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

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

「transition」プロパティを使うとトランジション関連のプロパティに対して一括で値をセットすることができます。つまり一括指定プロパティです。知っていると、素早くコーディングできるようになるし、コードの量が減らせるというメリットもあります。

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

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

「transition」プロパティを使うと何ができるのか？

.box {
    width: 300px;
    height: 300px;
    background-color: skyblue;
    
    transition: all 1s ease-out;

}
.box:hover {
    width: 600px;
    height: 200px;
    background-color: pink;
}

「transition」プロパティを使うと、2つの状態をどのように遷移するのか、つまりどのようにアニメーションするかの指定ができます。

そして、それらの指定ができる「トランジション関連」のプロパティに一括で値をセットすることができるのが「transition」プロパティです。つまり一括指定プロパティですね！

また、２つの状態は「:hover」などの擬似クラスを使ったり、JavaScriptを使うことによって定義することができます。

なるほど！

「transition」プロパティで一括指定できるプロパティには何がある？

「transition」で一括指定できるプロパティには下記があります。

• transition-duration
• transition-property
• transition-delay
• transition-timing-function

これらが「トランジション関連」のプロパティになります。

そしてこれらに一括で値をセットすることができるのが「transition」プロパティになりますね！

なるほどね！

「transition」プロパティの使い方！

それでは「transition」プロパティの使い方についてまとめますね！

一括指定する個別のプロパティに指定する値を半角空白区切りで書く！

.box {
    transition: all 2s 1s ease-out;
}

こんな感じで、「一括指定する個別のプロパティに指定する値」を「半角空白区切り」で書けばOKです！

普通の一括指定プロパティと同じ感じだね！

「transition-duration」と「transition-delay」の区別

.box {
    transition: all 2s 1s ease-out;
}

「transition-duration」と「transition-delay」は同じタイプの「時間」という値が入るので特別なルールがあります。

最初に書いた方が「transition-duration」の値と解釈されて、

次に書いた方が「transition-delay」の値と解釈されます。

なので上の例だと、「transition-duration」にセットされる値が「2s」で、「transition-delay」にセットされる値が「1s」と解釈されます。

個人的に「transition-duration」の方が使用頻度が高いと思うので、このような仕様になっていることは頷けますね。

基本的に値を書く順番はなんでもOK！

.box {
    transition: all 2s 1s ease-out;
    transition: 2s ease-out all 1s;
}

基本的に値を書く順番はなんでもOKなので、上の２行は同じ指定になります。

※「transition-duration」と「transition-delay」の値は順番が重要です！

値を省略すると、そのプロパティの初期値が入る

.box {
    transition-duration: 4s;
    transition: all ease-out;
}

このように値を省略して書くこともよくあります。

ですが、その場合はその省略したプロパティの初期値が入ってくるので注意が必要です。

上の例だと、「transition-duration: 4s」の行が、その下の「transition: all ease-out」の行で省略されているので初期値の「0s」で上書きされてしまっています。

このように意図せぬ上書きに注意しましょう！

まあこれは典型的な「一括指定プロパティあるある」ですね～。

「,」カンマ区切りで書くことで複数の指定ができる！

.box {
    width: 300px;
    height: 300px;
    background-color: skyblue;

    transition: width 1s ease-in, height 1s 1s ease-out;
    
}
.box:hover {
    width: 600px;
    height: 200px;
}

このように「,」カンマ区切りで書くことで複数の指定ができます！

「width」に対しての指定と、「height」に対する指定を分けたりと、CSSの各プロパティに別のトランジションの指定をすることで、より複雑なアニメーションの指定もできるので、ぜひ使ってみてください！

おお！これはいいね！

参考リンク！

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

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

おすすめの再生リスト！

こちらはYouTubeの再生リスト「CSSのアニメーション編」になります。

僕がCSSアニメーションについて丁寧に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「transition」プロパティを使うと、2つの状態をどのように遷移するのか、つまりどのようにアニメーションするかの指定ができる。

「transition」プロパティは「トランジション関連」のプロパティに一括で値をセットすることができる一括指定プロパティ。

「transition」で一括指定できるプロパティには下記がある。

• transition-duration
• transition-property
• transition-delay
• transition-timing-function

一括指定する個別のプロパティに指定する値を半角空白区切りで書く。

「transition-duration」と「transition-delay」は同じタイプの「時間」という値が入るので特別なルールがある。

基本的に値を書く順番はなんでもOK！

値を省略すると、そのプロパティの初期値が入る。（一括指定プロパティあるある）

「,」カンマ区切りで書くことで複数の指定ができる。

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

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

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

ではまた！