はじめに

初めまして。エンジニアのkeita_Maxです。

CSSのtransitionというものについてまとめました。

transitionとは

トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は :hover や :active のような擬似クラスで定義されたり、 JavaScript を使用して動的に設定されたりします。
(引用：https://developer.mozilla.org/ja/docs/Web/CSS/transition)

変化するときに簡単にアニメーションをつけることができるものです。

変化の遅延時間の設定

変化を開始するまでの遅延時間の設定がtransition-delayという項目で設定できます。

設定例

例えば３秒後にアニメーションを開始したい場合は以下のようにします。

.button{
    transition-delay: 3s;
}

参考

変化する項目の設定

変化する項目の設定が'transition-property'で設定できます。

設定例

すべてを変化させたい場合

.button{
    transition-property: all;
}

マージンだけ変化させたい場合

.button{
    transition-property: margin;
}

マージンと色を変化させたい場合

.button{
    transition-property: margin, color;
}

参考

設定例

0.5秒で変化させたい場合

.button{
    transition-duration: 500ms;
}

3秒で変化させたい場合

.button{
    transition-duration: 3s;
}

マージンと色の変化の時間を別で設定したい場合

.button{
    transition-duration: 3s, 1s;
    transition-property: margin, color;
}

変化にかかる時間を設定

変化にかかる時間の設定はtransition-durationで設定できます。

変化させたい要素に対して個別に設定することができます。

参考

変化の仕方の設定

transition-timing-functionという項目で設定することができます。

変化の速度の設定が6つ用意されています。

(引用元:https://www.asobou.co.jp/blog/web/css-animation3)

変化の仕方については引用元のページにより詳しく書いてあるのでご覧ください。

設定例

.button{
    transition-timing-function: ease-in;
}

参考

注意する点

'transition-behavior'

'transition-behavior'これはfirefoxで使用できないようなので注意が必要です。

高さや横幅に関してのアニメーション

また、高さや横幅はfit-contentやautoにするとアニメーションが聞かなくなるので注意してください。

その場合は'width:0%''width:100%'のようにするか、max-width:0vh``max-width:100vhのように最大値でアニメーション設定をしてください。

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

【CSS】transitionでできるアニメーションについてのまとめ