Why does the hover transform scale is so bad? [duplicate]

Question

I have this code using hover, when i use it is all ok , bit when I remove the mouse the element returns back so fast and It makes it look improper.

.cmd-1:hover {
  transform: scale(1.1);
  transition: 0.7s;
  color: gold;
  transition: all 0.7s ease-in-out;
}

Answer 1

The problem is that as soon as the user moves the mouse away the element loses its :hover state and with it it loses the transition you have set.

So, put that transition on the element without the hover. It will be inherited when the element is hovered also so both directions will ease to their new sizes.

.cmd-1 {
  transition: all 0.7s ease-in-out;
}

.cmd-1:hover {
  transform: scale(1.1);
  transition: 0.7s;
  color: gold;
}

<div class="cmd-1">HELLO
</div>.