複数のプロパティを持つ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でのテスト。

何が悪いのですか？

編集：明確にするために、CSSを縮小するための簡略版を探しています。すべてのベンダープレフィックスで十分に肥大化しています。サンプルコードも拡張しました。

構文：

transition: <property> || <duration> || <timing-function> || <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プロパティを持つもう1つです。

編集：以前にここにリストされたのは、に関する互換性と既知の問題transitionでした。読みやすくするために削除されました。

結論：それを使用してください。このプロパティの性質は、すべてのアプリケーションにとって非破壊的であり、互換性は現在、世界的に94％をはるかに超えています。

それでも確認したい場合は、http：//caniuse.com/css-transitionsを参照してください。

同じ方法で移行したい特定のプロパティがいくつかある場合（たとえば、移行したくないプロパティもいくつかあるためopacity）、別のオプションは次のようなものです（簡潔にするためにプレフィックスは省略します）。

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

2番目の宣言はall、その上の省略宣言のをオーバーライドし、（場合によっては）より簡潔なコードを作成します。

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}

<p>Hover box for demo</p>
<div class="box"></div>

デモ

これで動作する私：

element{
   transition : height 3s ease-out, width 5s ease-in;
}

不透明度プロパティの移行時に.5sの遅延を設けることにより、要素の高さが移行している間、要素は完全に透明（つまり非表示）になります。したがって、実際に表示されるのは、不透明度の変化だけです。したがって、高さプロパティを遷移から除外した場合と同じ効果が得られます。

「遷移：不透明度.5s .5s;」

それはあなたが望んでいることですか？そうでない場合、高さの遷移を見たいので、遷移している間中、不透明度をゼロにすることはできません。

これは私がアニメーション化するために必要なものだけを理解/合理化するのに役立ちました：

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

〜これは、「。base」クラス内のすべての遷移プロパティ（期間、遷移タイミング関数など）に適用されます

私はこれでうまくいくと思います：

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;