【transition】トランジションの設定

transitionプロパティでトランジション関連のプロパティを一括設定する

transitionプロパティを使用すると、トランジション関連のプロパティをまとめて設定することができます。

transitionプロパティの設定方法

transitionプロパティの値は、半角スペースで区切って順不同で指定できます。

ただし、下記の点には注意してください。

transitionプロパティの使用例

実際にtransitionプロパティで複数の値を指定すると、このようになります。

#sample {
         width: 150px;
         height: 150px;
         background-color: gray;
         transition: background-color 3s 1s ease;
}
#sample:hover {
         background-color: skyblue;
}

トランジションの一括設定のまとめ

今回は、トランジション関連プロパティの一括設定についてまとめました。

トランジションには、複数のプロパティを設定することが多くなりそうなので、transitionプロパティで設定できるようになると便利そうです。

みいと

Contact

興味を持ったものをいろいろと勉強しています。