Raccourci de transition CSS avec plusieurs propriétés?

Je n'arrive pas à trouver la syntaxe correcte pour le raccourci de transition CSS avec plusieurs propriétés. Cela ne fait rien:

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

J'ajoute la classe show avec javascript. L'élément devient plus haut et visible, il ne fait simplement pas de transition. Test dans les derniers Chrome, FF et Safari.

Qu'est-ce que je fais mal?

EDIT: Juste pour être clair, je cherche la version abrégée pour réduire mon CSS. Il est assez gonflé avec tous les préfixes des fournisseurs. Également développé l'exemple de code.

Syntaxe:

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

Notez que la durée doit précéder le délai, si celui-ci est spécifié.

Transitions individuelles combinées dans des déclarations abrégées:

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

Ou transformez-les tous:

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

Voici un exemple simple . En voici un autre avec la propriété delay .

Edit: précédemment répertoriés ici étaient les compatibilités et les problèmes connus concernant transition. Supprimé pour plus de lisibilité.

En bout de ligne: il suffit de l'utiliser. La nature de cette propriété est ininterrompue pour toutes les applications et la compatibilité est désormais bien supérieure à 94% dans le monde.

Si vous voulez toujours être sûr, reportez-vous à http://caniuse.com/css-transitions

Si vous avez plusieurs propriétés spécifiques que vous souhaitez faire transiter de la même manière (parce que vous avez également certaines propriétés que vous ne voulez pas spécifiquement transiter, par exemple opacity), une autre option consiste à faire quelque chose comme ça (préfixes omis par souci de concision):

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

La deuxième déclaration remplace la alldans la déclaration abrégée au-dessus d'elle et rend (occasionnellement) un code plus concis.

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

Démo

Je travaille avec ceci:

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

En ayant le délai de 0,5 s lors de la transition de la propriété d'opacité, l'élément sera complètement transparent (et donc invisible) pendant toute la durée de sa transition. Donc, la seule chose que vous verrez réellement est le changement d'opacité. Vous obtiendrez donc le même effet que de laisser la propriété height hors de la transition:

"transition: opacity .5s .5s;"

C'est ce que tu veux? Sinon, et vous souhaitez voir la transition de hauteur, vous ne pouvez pas avoir une opacité de zéro pendant tout le temps de la transition.

Cela m'a aidé à comprendre / rationaliser, uniquement ce dont j'avais besoin pour animer:

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

~ Ceci s'applique à toutes les propriétés de transition (durée, fonction de synchronisation de transition, etc.) au sein de la classe '.base'

Je pense que cela fonctionne avec ceci:

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