How to make reverse :hover animation?

Issue

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

Solution

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>

Answered By - A Haworth