css transition delay ease-out but not ease in-CodePudding

I have a generic menu, which has a dropdown. That dropdown shows just fine with

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

But I I'm trying to change it to work on height alone, while still keeping 0.4s ease-in. But on ease-out I would like it to do the same but with a 1s delay.

I have tried

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

But that also adds the delay on ease-in,

The ease-out should work when I leave hover on the element.

is it just not possible or am I doing something wrong?

CodePudding user response：

the properties you give to animation works only when you start the animation by writing ease-in thats will function at the start of the animation but with ease-out that will function when the animation about to end , you can give another animation when you leave the hover and customize it as you want

CodePudding user response：

So I finally found an example that seems to work, I made a small prototype here: https://codepen.io/andrelange91/pen/zYRyRyw

Where I split up the two pieces, thereby having a hover on and 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;
  }
}