CSS

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

みいと

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

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

transitionプロパティの設定方法

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

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

時間をあらわすプロパティ(transition-duration、transition-delay)を使用する場合は、下記のような扱いになります。

  1. 1つ目がtransition-durationの指定
  2. 2つ目がtransition-delayの指定

transitionプロパティの使用例

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

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

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

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

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

まとめ

  • transitionを使用すると、トランジション関連のプロパティを一括設定できる
  • 時間をあらわすプロパティを設定する場合は、1つ目がtransition-duration、2つ目がtransition-delayとして扱われる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました