只是将一个简单的汉堡菜单动画放在一起,却被无法执行的过渡效果所困扰,我不确定我哪里出错了。
这可能是非常简单的东西,但似乎无法在任何地方找到正确的引用。
.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
最佳答案
您只需要在选择器规则中用逗号分隔转换:
.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;
}
关于css - 不执行 CSS3 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42372362/