CSS transition ease in and ease out different value-CodePudding

I want to apply for CSS transition different values on hover in ease-in and ease-out.

Like this,

ease-in: 180ms,
ease-out: 240ms

when I hover it will be 180ms ease-in, but when hovering out it will be 240ms ease-out.

CodePudding user response：

You can use different transition-duration values for the styles affecting your element, for example:

div {
  width: 150px;
  height: 150px;
  background-color: gray;
  transition: width 180ms ease-in;
}

div:hover {
  width: 300px;
  transition-duration: 240ms;
  transition-timing-function: ease-out;
}

<div>My Element</div>

For more details please check CSS Transitions