How can I do a "un hover" animation?

Question

I want to use a transition + transform when someone hovers in my banner. Here the example:

#banner:hover {
transition: all 300ms;
transform: scale(1.01, 1.01); }

But when I quit the mouse over the banner, it suddenly transforms again to scale(1,1) but with no transition. I've tried with:not(hover) but what happens is that when I refresh the page, the banner makes a transition. Idk how to fix this. All I want is a transition when I hover on it and a transition when I put my mouse away from the banner, anything else.

I see some doubts so I'm going to clarify them. I ONLY want a transition when I hover the banner and when I quit the mover hover, a transition returning to his first scale. I have this code in #banner and in #banner:hover :

#banner {
transform: scale(1, 1); }

#banner:hover {
transition: all 300ms;
transform: scale(1.01, 1.01);}

The problem here is, if I put the transition: all 300ms; on my #banner, when I refresh the website it makes a transition.

Solved: adding transition: 300ms; in the #banner and not #banner:hover.

Hi! add `transition: all 300ms` to `#banner` only. Remove it from hover so that it will animate on both. — Debsmita Paul, Jul 31 '20 at 14:19
Look, if I use the transition: all 300 ms in my #banner, the same thing happens. When I update the website, the banner makes a transition to putting itself on your site. — Rikku ESP, Jul 31 '20 at 14:26
You need to set the scale to (1,1) by default: `#banner { transform: scale(1,1); transition: all 300ms;"}` — disinfor, Jul 31 '20 at 14:27
So your question is not "Which command is the opposite of hover in CSS3?" but rather something like "how can I have a transition into the :hover state, but not back out"? — Heretic Monkey, Jul 31 '20 at 14:35
Also, please include a [mre] with code showing the behavior. You can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) (icon looks like `<>` in the editor toolbar) to provide a runnable example here on Stack Overflow. — Heretic Monkey, Jul 31 '20 at 14:37
Just the opposite. Imagine that: I have a box with the background red with a transition: all 300ms;. When I hover it I want to change it to blue, and when I quit the mouse over that box, I want to change it background color to yellow in the 300ms that it lasts to return to the red background. — Rikku ESP, Jul 31 '20 at 14:37
Okay... But that's not at all what your question asks. There's no third state mentioned. Please [edit] your question to reflect exactly what you want, step by step. — Heretic Monkey, Jul 31 '20 at 14:40

score 1 · Answer 1 · answered Jul 31 '20 at 14:29

1

To retain the animation both ways, use transition on the initial state, not on the :hover one:

#banner {
  background: red;
  transform: scale(1);
  transition: all 300ms;    /* HERE! */
}

#banner:hover {
  transform: scale(1.2);
}

<div id="banner">HOVER ME</div>

answered Jul 31 '20 at 14:29

Roko C. Buljan

164,703
32
260
278

the same happens, I've edit my question, read it please :) – Rikku ESP Jul 31 '20 at 14:35

Emanuele Scarabattoli · Accepted Answer · 2020-07-31T14:36:17.740

0

You should do something like this:

#banner {
  transform: scale(1, 1);
  transition: all 300ms;
}

#banner:hover {
  transform: scale(1.01, 1.01);
}

edited Jul 31 '20 at 14:36

answered Jul 31 '20 at 14:21

Emanuele Scarabattoli

2,273
1
5
13

1

This is incorrect. You only need the `transition` on the non-hover state. – disinfor Jul 31 '20 at 14:22
1

@disinfor that means: partially correct – Roko C. Buljan Jul 31 '20 at 14:22
@RokoC.Buljan semantics :) – disinfor Jul 31 '20 at 14:23
Ok now? if yes, please remove the downvote – Emanuele Scarabattoli Jul 31 '20 at 14:24
1

Down vote removed, although there already is a duplicate question with an approved answer. – disinfor Jul 31 '20 at 14:25
No no i was not "insecure", I just noticed now that he/she does not wont the animation in both hover and leave. – Emanuele Scarabattoli Jul 31 '20 at 14:26
Look, if I use the transition: all 300 ms in my #banner, the same thing happens. When I update the website, the banner makes a transition to putting itself on your site. And use both transition in hover or in #banner are the same so – Rikku ESP Jul 31 '20 at 14:27

How can I do a "un hover" animation?

2 Answers2