0
Alright, so when I use this code and hover over the object, the transition works. But if I take my mouse OFF of the object, the transition doesn't happen. I've seen other posts talk about this but the solutions don't work.

Here's my code in CSS:

.square{
margin-top: 20px;
  height: 100px;
  width: 400px;
  border-radius: 20px;
  background:#3d3434;
  outline: none;
  transition: 0.25s;
}

.square:hover{
    outline: 3px solid #21ff46;
}

Also, I'm relatively new to coding and CSS.

Production Nerd
  • 21
  • 6

1 Answers1

0

You code works properly. The reason why you see no animation on mouseleave is that after hover pseudostate ends, there's no outline at all, and browser doesn't know to what position he has to shrink the outline. Also it doesn't understand what color it should preserve while shrinking, without hover state there's no color defined.

So, the solution is to add this line to your .square

outline: 0 solid #21ff46;

Leave the rest as it is, your problem is solved.

LiquiD.S1nn3r
  • 120
  • 7
  • Thanks, but the transition is really choppy. How do i fix that now? – Production Nerd Feb 13 '22 at 23:20
  • just play with numbers of transition duration, 0.25 is probably too low also it's not the case here, of course, but try to experiment with .square { will-change: outline; } If this improves the smoothness, then it means your PC is just not strong enough to handle that transition in regular mode, it hangs – LiquiD.S1nn3r Feb 14 '22 at 00:09
  • I tried increasing it to .5 seconds. It's still really choppy – Production Nerd Feb 14 '22 at 01:55