Singkatan transisi CSS dengan beberapa properti?

Sepertinya saya tidak dapat menemukan sintaks yang benar untuk singkatan transisi CSS dengan beberapa properti. Ini tidak melakukan apa-apa:

.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;
}

Saya menambahkan kelas pertunjukan dengan javascript. Elemen menjadi lebih tinggi dan terlihat, hanya saja tidak transisi. Menguji Chrome, FF, dan Safari terbaru.

Apa yang saya lakukan salah?

EDIT: Untuk memperjelas, saya mencari versi singkat untuk menurunkan CSS saya. Sudah cukup kembung dengan semua awalan vendor. Juga memperluas kode contoh.

Sintaksis:

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

Perhatikan bahwa durasi harus datang sebelum penundaan, jika yang terakhir ditentukan.

Transisi individual digabungkan dalam deklarasi steno:

-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;

Atau cukup transisikan semuanya:

-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;

Ini adalah contoh sederhana . Ini satu lagi dengan properti delay .

Sunting: sebelumnya terdaftar di sini adalah kompatibilitas dan masalah yang diketahui tentang transition. Dihapus untuk dibaca.

Intinya: gunakan saja. Sifat properti ini tidak melanggar untuk semua aplikasi dan kompatibilitas sekarang jauh di atas 94% secara global.

Jika Anda masih ingin memastikan, lihat http://caniuse.com/css-transitions

Jika Anda memiliki beberapa properti spesifik yang ingin Anda transisikan dengan cara yang sama (karena Anda juga memiliki beberapa properti yang tidak ingin Anda transisikan, katakanlah opacity), opsi lain adalah melakukan sesuatu seperti ini (awalan dihilangkan karena singkatnya):

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

Deklarasi kedua mengesampingkan deklarasi allsteno di atasnya dan membuat (kadang-kadang) kode yang lebih ringkas.

/* 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>

Demo

Saya yang bekerja dengan ini:

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

Dengan keterlambatan 0,5 pada transisi properti opacity, elemen akan sepenuhnya transparan (dan dengan demikian tidak terlihat) sepanjang waktu tingginya transisi. Jadi satu-satunya hal yang akan Anda lihat adalah opacity berubah. Jadi, Anda akan mendapatkan efek yang sama dengan meninggalkan properti tinggi dari transisi:

"transisi: opacity .5s .5s;"

Itukah yang kamu inginkan? Jika tidak, dan Anda ingin melihat transisi ketinggian, Anda tidak dapat memiliki opacity nol sepanjang waktu transisi.

Ini membantu saya memahami / merampingkan, hanya yang saya butuhkan untuk menghidupkan:

// 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
  }
}

~ Ini berlaku untuk semua properti transisi (durasi, fungsi-waktu-transisi, dll.) Dalam kelas '.base'

Saya pikir itu bekerja dengan ini:

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