transition CSS プロパティ構文「transition: [ none | <single-transition-property> ] || <time> ||

Question

transition CSS プロパティ構文の意味を知りたい

transition: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

---

4つ指定する場合は分かるのですが、それ以外にはどんな指定が可能なのでしょうか？
・3つや2つも指定可能？

---

[ none | <single-transition-property> ]

・何も指定しない、または、transition-propertyを指定？
・[]は初期値？

---

[ none | <single-transition-property> ] || <time>

・この場合の||はどういう意味？

https://developer.mozilla.org/ja/docs/Web/CSS/transition

Answer 1

4つ指定する場合は分かるのですが、それ以外にはどんな指定が可能なのでしょうか？

『transition-property、transition-duration、transition-timing-function、transition-delay の各プロパティの値を設定するショートハンドプロパティ』って書いてあるとおりです。これらを省略して書けるってだけ。

この場合の||はどういう意味？

何も記述しないか、何か書くなら<single-transition-property> ] か <time> か <timing-function> か <time>って意味かと。

Comments

[re97]

回答ありがとうございます。
・省略する場合の書き方ですが、例えば引数を2つだけ書いた場合、それが、第1,第2引数か、第2,第3引数か、などどこに当てはまるか、どうやって判断するのでしょうか？
・それとも省略できるのは、全く何も書かないか、第1引数だけ？

[ogaaaan]

どうやって判断するのかはcssのパーサーが勝手にやってくれるので、そこを考えないですむのがショートハンドなんだよね。

ちなみにborderとかもそうで、
border: 1px solid #fff;
でも
border: solid 1px #fff;
でも認識します。

よく見るとみんな特徴があって、
スペースを挟んで英文字だけ、数字と記号だけ、色指定、的な感じで識別してる。

でも同じ記述を複数指定する場合もあって、
たとえばpaddingやmarginだと

margin: 10px → 上下左右が10px
margin: 10px 0 → 上下が10px、左右が0
margin: 10px 0 0 → 上が10px、左右が0、下も0

みたいな、順序が決められてるのもあると。

[re97]

コメントありがとうございました。
説明大変わかりやすかったです

Answer 2

複数ある<time>を除けば、<single-transition-property>（CSSプロパティ）と<timing-function>（イージング）に指定できるものは決まっていますし、それらは重複しませんので、引数が少ないから位置を誤認する可能性は心配しなくて構いません。

Comments

[re97]

・回答ありがとうございました
・複数ある<time>にさえ気をつければ良いということでしょうか？
・参考になりました