CSS transition ease in and ease out different value

Issue

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.

Solution

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

Answered By – A.Amayreh

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.