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です。

-広告-

Anker PowerExpand Direct 7-in-2 USB-C PD メディア ハブ 4K対応 HDMIポート 100W出力 Power Delivery 対応 Thunderbolt 3 USB-Cポート USB-A ポート microSD & SDカード スロット搭載 価格：5999円（税込、送料無料) (2020/10/2時点) 楽天で購入

PD 充電器 RAVPower Type C 急速充電器 90W【GaN (窒化ガリウム)採用/2ポート/折畳式/PD対応/PSE認証済】iPhone 11/11 Pro/11 Pro Ma 価格：7329円（税込、送料無料) (2020/10/2時点) 楽天で購入