パソ君
・transitionでプロパティを複数指定するには？
こんな疑問にお答えします。
transitionを使うときに下記のように「all」を使うこと多いかと↓
transition: all .5s;でも実際これだと、予期せぬ挙動が発生することがあります。
そのため、あまりオススメしません。
対策としては複数指定することです。
簡単に実装できちゃいます。
ジト
すぐにできるよ！
ということで、この記事では「transitionでプロパティを複数指定する方法」について解説していきます！
この記事でわかること
transitionでプロパティを複数指定する方法
目次
【解説】transitionでプロパティを複数指定する方法【CSS】
実際にtransitionでプロパティを複数指定したサンプルがこちら↓
See the Pen transitionでプロパティを複数指定➀ by jito-coder (@jito-coder) on CodePen.
- 文字色⇒0.5秒
- 背景色⇒1秒
- padding⇒2秒
それぞれのアニメーションの時間を別で指定しています。
複数指定のやり方は、カンマで区切って記述することです。
transition: color .5s, background-color 1s, padding 2s;これだけでtransitionを複数指定できちゃいます。
transitionのショートハンドは下記になります。
| transition-property | プロパティ（初期値はall） |
| transition-duration | アニメーション開始～終了までの時間（初期値は0） |
| transition-timing-function | アニメーションの進行度（初期値はease） |
| transition-delay | アニメーション開始までの時間（初期値は0） |
複数指定する場合、全てを記述する必要はありませんが「transition-property」と「transition-duration」は記述しておきましょう。
transition: プロパティ名 秒数, プロパティ名 秒数, プロパティ名 秒数;プロパティ名は省略しちゃうと、思わぬ挙動が起きる原因になりうるのでちゃんと記述すべし！
ちなみにアニメーションの秒数が同じだったとしても、それぞれ記述しましょう。
transition: color .5s, background-color .5s, padding .5s;【解説】transitionでプロパティを複数指定する方法【CSS】：まとめ
- カンマで区切ればtransitionを複数指定できる
- プロパティ名と秒数は記述すべし
- 秒数が同じでもそれぞれに対して記述すべし
ジト
transitionで複数していする時はためしてみてね！
