Non-exécution de la transition CSS3

Question

Il suffit de mettre en place une simple animation de menu de burger et j'ai été surpris par les effets de transition qui ne s'exécutent pas et je ne suis pas sûr d'où je vais.

C'est probablement quelque chose de très simple mais ne semble pas pouvoir trouver la bonne référence n'importe où.

.cross span{ 
    /* Transition Out*/ 
    transition: transform .15s ease-in-out; /* No Transition */ 
    transition: width 0s ease-in-out .1s; 
    transition: top .15s ease-in-out .2s; 
} 

.cross.active span{ 
    /* Transition In*/ 
    transition: top .15s ease-in-out; /* No Transition */ 
    transition: width 0s ease-in-out .1s; 
    transition: transform .15s ease-in-out .2s; 
} 

Voici le Codepen http://codepen.io/anon/pen/VPoxXW

Answer 1

Vous avez juste besoin de séparer les transitions par des virgules à l'intérieur règle de sélection:

.cross span{ 
    transition: transform .15s ease-in-out, 
       width 0s ease-in-out .1s, 
       top .15s ease-in-out .2s; 
} 
.cross.active span{ 
    transition: top .15s ease-in-out, 
       width 0s ease-in-out .1s, 
       transform .15s ease-in-out .2s; 
} 

codepen