Birden çok özelliğe sahip CSS geçiş kestirme?

Birden çok özellik ile CSS geçiş kısayol için doğru sözdizimini bulamıyorum . Bu hiçbir şey yapmaz:

.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 ile gösteri sınıfını ekliyorum. Öğe daha yüksek ve görünür hale gelir, sadece geçiş yapmaz. En son Chrome, FF ve Safari'de test etme.

Neyi yanlış yapıyorum?

EDIT: Açıkça söylemek gerekirse, CSS aşağı ölçeklendirmek için stenografi sürümünü arıyorum. Tüm satıcı önekleriyle yeterince şişirilmiş. Ayrıca örnek kod genişletildi.

Sözdizimi:

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

İkincisi belirtilirse, sürenin gecikmeden önce gelmesi gerektiğini unutmayın.

Steno beyanlarda birleştirilmiş bireysel geçişler:

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

Veya sadece hepsini değiştirin:

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

İşte basit bir örnek . Gecikme özelliği olan başka bir tane .

Düzenleme: Daha önce burada listelenen uyumluluklar ve ilgili konular vardı transition. Okunabilirlik için kaldırıldı.

Alt satır: sadece kullanın. Bu özelliğin doğası tüm uygulamalar için kırılmaz ve uyumluluk artık küresel olarak% 94'ün oldukça üzerindedir.

Hala emin olmak istiyorsanız, http://caniuse.com/css-transitions adresine bakın.

Aynı şekilde geçiş yapmak istediğiniz birkaç belirli özelliğiniz varsa (özellikle geçiş yapmak istemediğiniz bazı özelliklere sahip olduğunuz için, örneğin opacity), başka bir seçenek bunun gibi bir şey yapmaktır (kısalık için önekler atlanmıştır):

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

İkinci deklarasyon, allyukarıdaki kısayol deklarasyonunu geçersiz kılar ve (bazen) daha özlü kod yapılmasını sağlar.

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

gösteri

Ben bununla çalışırım:

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

Opaklık özelliğinin geçişinde .5s gecikmesinin olmasıyla eleman, yüksekliği geçişi boyunca tamamen şeffaf (ve dolayısıyla görünmez) olacaktır. Yani göreceğiniz tek şey opaklığın değişmesidir. Böylece height özelliğini geçişin dışında bırakmakla aynı etkiyi elde edersiniz:

"geçiş: opaklık .5s .5s;"

İstediğin bu mu? Değilse ve yükseklik geçişini görmek istiyorsanız, geçiş yaptığı süre boyunca sıfır opaklığa sahip olamazsınız.

Bu, sadece canlandırmam gerekenleri anlamama / düzene koymamda bana yardımcı oldu:

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

~ Bu, '.base' sınıfı içindeki tüm geçiş özellikleri (süre, geçiş zamanlaması işlevi, vb.) İçin geçerlidir

Bence bu işe yarar:

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