不执行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