CSS

transitionの一括指定プロパティを使おう

transition関連のプロパティを一括で指定する方法を見ていきます。

  • transitionの一括指定プロパティ
  • 時間に関する注意

transitionの一括指定プロパティ

・transition 関連のプロパティですが、一括で指定することもできます。

・順不同かつ省略可で指定していくことができるので、transformで3秒間かけて弾かれたように動かしたい場合だと transition: transform 3s ease-out; と繋げて書いていってあげればおkです。

・それから transition-delay をさらに指定したい場合ですが、数値をふたつ指定すると最初のほうが duration 、次の値が delay の指定になるので、 delay を指定したい場合は最後に書いてあげればおK ですね。

時間に関する注意

・複数のプロパティを変化させた場合も見ておきます。変化後のスタイルに background: skyblue; としてあげましょう。

・その上で background に関する指定を追加したい場合は、こちらでカンマ区切りで書いてあげれば OK です。background 0.5 秒でアニメーションさせたいのでbackground .5s;と追加させてあげればおkです。

-広告-

 

 






-CSS