transition

スタイル定義の中にtransitionの長い１行があって意味がわからないでおります。
transition: width 300ms ease-out, opacity 150ms 150ms ease-in;

ease-out,ease-inがゆっくり終わる、ゆっくり始まるという意味らしいのですが、
300msとか150msがなんの時間を表しているのか
opacityは透明度なんでしょうけどそれと150msがなんの関係にあるのか、
widthはなんの幅なのかよくわからないでおります。
transitionで横長の行の記述の例は検索してもなかなかみつかりませんでした。
おわかりのかた教えていただきたく存じます。

質問者からの補足コメント

• お示しいただいたサイトをみたのですが、transitionの行にwidthを書くとどんな意味になるのか解説されている箇所がみつかりません
  このことが解説されているサイトも見当たらずです
  なのでどうにも意味に検討がつかないんです

    補足日時：2018/03/21 20:53

• http://webmage.pro/blog/archives/1085
  も調べてみました。
  .myElement {
  transition: property duration delay timing-function,
  all 2s 400ms ease-out;
  }
  みたいな感じで書く。
  と書かれていましたので次のように考えてみました。
  
  アニメーションによって
  width（アニメーション対象物のサイズ幅）に変化が生じる場合、それに300msかけてゆっくり終わること。
  opacity（アニメーション対象物の透明度）に変化が生じる場合には、150ms遅延させてゆっくり始まり、opacityの変化に150msかけること
  アニメーションの具体的な内容は、別個所の行によって定義される
  
  という解釈で正しいでしょうか・・・

  No.3の回答に寄せられた補足コメントです。 補足日時：2018/03/22 19:04

No.3 回答者： fujillin 回答日時： 2018/03/22 16:20

＞解説されている箇所がみつかりません

「transition の定義」に書いてあるけど・・・
わからない場合は、親切にも「解説」の解説へワンクリックで行けるようにもなっているのに。
https://developer.mozilla.org/ja/docs/Web/CSS/tr …

＞widthはなんの幅なのかよくわからないでおります。
transisonを調べる前に、通常のCSSの構成について調べた方が良いのかも知れません。

No.2 回答者： naokita 回答日時： 2018/03/20 12:38

自分も最初、あるテンプレで数十箇所も同じ記述があったので戸惑った事がありましたｗ

最近流行のテンプレはかなり使っていますが、自分はあまり利用しません。重くなるから・・・

例えば、
メニューボタンや画像などのオンマウス時の動作、a:hover擬似クラスで瞬時に変化できますよね？
もう少し凝った仕様で、transition だと、もっとゆっくりと（フェードイン/フェードアウトのような）動作させたり、自由にアニメーションのように動作させる事が出来ます。

動作させるのに、その○○ms（ミリ秒）や○s（秒）という速度の単位や値
１秒 = 1s = 1000ms
この数値は、良くjQueryでも利用するので覚えておいて損はない。
10倍や1/10ぐらいの値に倍率変更して比較するとわかると思いますよ。

どのよう動作させるか？その為のプロパティや値で、言葉や文章で表現は難しいので、サンプルを見たり、試作や比較すると、体が覚えると思いますｗ

No.1 回答者： fujillin 回答日時： 2018/03/20 11:15

こんにちは

transitionはCSSによるアニメーションの際の変化の仕方を設定するものです。

＞transitionで横長の行の記述の例は検索してもなかなかみつかりませんでした。
「横長」の意味がよくわかりませんが・・・、説明や記述例は検索すれば数多く見つかるはずと思います。


解説の例
https://developer.mozilla.org/ja/docs/Web/CSS/CS …

検索の例
https://www.google.co.jp/search?q=CSS+transition …