How to make reverse :hover animation?

Question

When I hover a circle, animation plays normally, but when my mouse leaves the class it immediately disappears.

body {
  margin: 100px;
}

#circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: black;
}

#square {
  height: 100px;
  width: 100px;
  background-color: black;
  position: relative;
  left: 200px;
  top: -100px;
  opacity: 0;
}

#shapes {
  height: 100px;
  width: 100px;
}

#shapes:hover>#square {
  opacity: 1;
  transition: opacity 1s;
}

<div id="shapes">
  <div id="circle"></div>
  <div id="square"></div>
</div>

I want the disappearance animation be as smooth as the ordinary animation

score 1 · Accepted Answer · answered Aug 28 '22 at 07:58

You don't need JavaScript for this.

The problem is that you have set the transition only in the hover state.

If you put it on the actual element without a specified state it will be enacted when the hover is taken off as well as when it is put on.

body {
  margin: 100px;
}

#circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: black;
}

#square {
  height: 100px;
  width: 100px;
  background-color: black;
  position: relative;
  left: 200px;
  top: -100px;
  opacity: 0;
  /* ADDED */
  transition: opacity 1s;
}

#shapes {
  height: 100px;
  width: 100px;
}

#shapes:hover>#square {
  opacity: 1;
}

<div id="shapes">
  <div id="circle"></div>

  <div id="square"></div>
</div>

How to make reverse :hover animation?

1 Answers1