不執行CSS3轉換輸出

Question

只是放在一起簡單的漢堡菜單動畫，並被過渡效果難以執行，難以置信我不知道我錯了。

這可能是非常簡單的東西，但似乎無法在任何地方找到正確的參考。

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

這裏是Codepen http://codepen.io/anon/pen/VPoxXW

Answer 1

你只需要通過選擇規則裏面逗號分隔的轉變：

.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