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