Não consigo encontrar a sintaxe correta para a abreviação de transição CSS com várias propriedades. Isso não faz nada:
.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;
}
Eu adiciono a classe show com javascript. O elemento se torna mais alto e visível, apenas não faz a transição. Teste nos mais recentes Chrome, FF e Safari.
O que estou fazendo errado?
EDIT: Só para ficar claro, eu estou procurando a versão abreviada para reduzir meu CSS. É inchado o suficiente com todos os prefixos do fornecedor. Também expandiu o código de exemplo.
.5s
valores duplos são opacity
pretendidos?