CSS过渡延迟缓出但不缓进

Question

我有一个通用菜单，它有一个下拉菜单。下拉列表显示

很好

-webkit-transition: all 0.4s ease-in-out;

但是我正试图改变它的工作高度单独，同时仍然保持0.4s易于使用。但在ease-out时，我希望它也这样做，但要延迟15秒。

我试过了

-webkit-transition: height 0.4s ease-in, height 0.4 ease-out 1s;

但是这也增加了ease-in的延迟，

当我将鼠标悬停在元素上时，缓出效果应该会起作用。

这是不可能的还是我做错了什么?

Answer 1

你赋予动画的属性只在你开始动画时起作用通过写ease-in它将在动画开始时起作用而ease-out将在动画即将结束时起作用，你可以在离开悬停时赋予另一个动画并根据需要进行自定义

Answer 2

所以我终于找到了一个似乎有效的例子，我在这里做了一个小原型:https://codepen.io/andrelange91/pen/zYRyRyw

我把这两部分分开，这样就有了一个hover on和hover off。

.box {
height:100px;
// hover off
transition: height 0.4s ease-out 1s;
&:hover{
// hover on
transition: height 0.4s ease-in;
height:150px;
}
}