CSS geçiş için doğru sözdizimi bulmak için görünmüyor olabilirstenobirden fazla özelliklere sahip. 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;
}

Gösteri javascript ile class ekliyorum. Eleman yüksek olur ve görünür, bu sadece bir geçiş değil. Test En son Chrome, FF ve Safari.

Neyi yanlış yapıyorum?

EDİT: Sadece temiz olması için, steno sürümü için CSS küçültün arıyorum. Tüm satıcı önekleri ile şişirilmiş yeterli. Ayrıca, genişletilmiş örnek kodu.

Sözdizimi

Shorthand syntax:

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

Süresi ikinci eğer belirtilirse gecikme önce gelmesi gerektiğini unutmayın. Bireysel geçişler steno tanımlamalar kombine:

-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;
-ms-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; /* IE10 is actually unprefixed */
-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;

Ya da sadece geçiş hepsini:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out; /* IE10 is actually unprefixed */
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Burada a straightforward example. İşte bir tane daha with the delay property.

Mart 2015 olarak uyumluluk

Global destek: 89.14% (http://caniuse.com/css-transitions veri)

Öneksiz:

• Android tarayıcı 4.4
• Chrome 26
• Android için Chrome 31
• Firefox 16
• Android için Firefox 23
• IE10
• IE Mobile 10
• Opera 12.1
• Opera Mobile 12.1
• Safari 7

-webkit- (Y motoru) öneki:

• 4.3 2.1 tarayıcı Android
• 25 krom
• 31 Android için Chrome
• Mobil (iOS) 6 3.2 Safari
• 3.1 6 Safari
• Blackberry Tarayıcı 7

-moz- öneki (Gecko motoru)

• 4 ila 15 Firefox

-o- öneki (Presto motoru)

• Opera 10.5 ile 12
• Opera Mobile 10 ile 12

Desteklenmeyen

• 9 kadar YANİ
• 3.6 kadar Firefox
• Opera için 10.1
• Opera Mini

Bilinen sorunlar (caniuse.com)

1. Pseudo-elementleri dışında herhangi desteklenir ::önce ve sonra Firefox, 26 , 16, Opera ve IE10 Chrome .
2. Calc ile Transitionable özellikleri() türetilmiş değerleri aşağıda desteklenmez ve including IE11 <^. 'background-size' aşağıda desteklenen ve IE10 dahil . yanar