Get a slow animations on
using css when mouse out from de
tag

Question

When I position the cursor over my h1 element it scales by 2, so when the cursor leaves the h1 I want it to return to its normal size but in the same way...slowly!

.navBar h1:hover {
  color: rgb(248, 250, 144);
  transform: scale(1.7);
  transition: linear 1s;
  z-index: 10;
  text-shadow: 2px 8px 5px 1px rgba(224, 224, 117, 0.952);
}

I don't know if that's intended, but when using `transfor: scale(n)` your title is going to scale to the left, overflowing the window frame. You should scale it by increasing the `font-size` instead. — Noah Boegli, May 09 '20 at 21:37

Johannes · Accepted Answer · 2020-05-09T22:05:11.970

2

Apply the transition setting to the non-hover state instead of the hover rule:

.navBar h1 {
  transition: linear 1s;
}

.navBar h1:hover {
  color: rgb(248, 250, 144);
  transform: scale(1.7);
  z-index: 10;
  text-shadow: 2px 8px 5px 1px rgba(224, 224, 117, 0.952);
}

<div class="navBar">
  <h1>This is an H1 Header</h1>
</div>

edited May 09 '20 at 22:05

answered May 09 '20 at 21:31

Johannes

64,305
18
73
130

Thanks it was in front of me all time ..Im just a beginner – An2_m001 May 09 '20 at 21:40
1

And then you no longer need the `transition` declaration in the hover ruleset. – agrm May 09 '20 at 22:03

score -1 · Answer 2 · answered May 09 '20 at 21:31

Use :not(:hover) to apply another transition

.navBar h1:hover {
  color: rgb(248, 250, 144);
  transform: scale(1.7);
  transition: linear 1s;
  z-index: 10;
  text-shadow: 2px 8px 5px 1px rgba(224, 224, 117, 0.952);
}

.navBar h1:not(:hover){
  transform: scale(1.7);
  transition: linear 2s;
}

Get a slow animations on using css when mouse out from de tag

using css when mouse out from de

tag

2 Answers2

Get a slow animations on
using css when mouse out from de
tag