不执行 CSS3 过渡答案

【问题标题】：Not Executing CSS3 Transition Out不执行 CSS3 过渡
【发布时间】：2017-02-22 00:39:41
【问题描述】：

只是把一个简单的汉堡菜单动画放在一起，却被没有执行的过渡效果难住了，我不确定我哪里出错了。

这可能很简单，但似乎无法在任何地方找到正确的参考。

.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

【问题讨论】：

标签： css css-transitions css-transforms

【解决方案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

【讨论】：