[解決済み] 複数のプロパティを持つCSSトランジションショートハンドリング？

質問

CSS の遷移について、正しい構文が見つからないのですが。 速記 を複数のプロパティで使用することができます。これでは何もできない。

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

javascriptでshowクラスを追加しています。要素が高くなり、見えるようになりますが、遷移しないだけです。最新のChrome、FF、Safariでテストしています。

何が間違っているのでしょうか？

EDIT: はっきりさせておきたいのですが、私はCSSを縮小するための短縮版を探しているのです。ベンダープレフィックスのせいで、十分肥大化しているんです。また、サンプルコードも拡張しました。

解決方法は？

シンタックス

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

delayが指定された場合、durationはdelayの前になければならないことに注意してください。

個々のトランジションは省略記法の宣言で結合される。

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

あるいは、全部移行すればいい。

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

以下は わかりやすい例 . もうひとつは delay プロパティで .

編集する に関する互換性と既知の問題は、以前ここに記載したとおりです。 transition . 読みやすくするために削除しました。

結論：とにかく使ってください。このプロパティの性質は、すべてのアプリケーションで壊れることはなく、互換性は現在、グローバルで94%をはるかに超えています。

それでも念のためということであれば、以下をご参照ください。 http://caniuse.com/css-transitions