Why does the hover transform scale is so bad?

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;
}

The transtion needs to be on the .cmd-1 class, not just the hover state — dantheman, Feb 10 '22 at 21:36
As said by @dantheman , transition applies to only onver state of the .cmd-1 tag.. For both hover and unhover transitions you have to set the transition in the base style i.e. `.cmd-1 { transition: all .7s ease-in-out; }` — Ashish Bhattarai, Feb 10 '22 at 21:40

score 2 · Answer 1 · answered Feb 10 '22 at 21:42

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>.

Why does the hover transform scale is so bad?

1 Answers1