Animate CSS Pseudo Class

Question

I am trying to create a search icon that transforms into an input when hovered over. I am using the pseudo class ::after for the handle of the magnifying glass. Essentially, I want the handle to smoothly disappear when the icon is hovered over. Here is a link to my codepen.

body {
  text-align: center;
}
#magnifying-glass {
  display: flex;
  justify-content: center;
  height: 100px;
  width: 100px;
  border-radius: 100px;
  border: 14px solid red;
  margin: 0 auto;
  margin-top: 200px;
  transition: 1s;
}
#magnifying-glass::after {
  content: "";
  height: 50px;
  width: 14px;
  background-color: red;
  transform: rotate(-45deg);
  position: relative;
  top: 85px;
  left: 50px;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
input {
  display: none;
  border: none;
  width: 70%;
  font-size: 2.5em;
  border-radius: 40px;
}
input:focus {
  outline: none;
}
#magnifying-glass:hover {
  width: 300px;
}
#magnifying-glass:hover #magnifying-glass::after {
  width: 0px;
}
#magnifying-glass:hover input {
  display: block;
}

<div id="magnifying-glass">
    <input type="text" placeholder="Search">
</div>

Thanks so much!

Answer 1

If you want it to smoothly disappear and not so sharp change the transition times below to the following.

#magnifying-glass::after {
  content: "";
  height: 50px;
  width: 14px;
  border-radius: 10px;
  background-color: red;
  transform: rotate(-45deg);
  position: absolute;
  top: 88px;
  left: 100px;
  -webkit-transition: 2.5s;
  -moz-transition: 2.5s;
  -o-transition: 2.5s;
  transition: 2.5s;
}

And to make it even smoother you can add:

#magnifying-glass:hover::after {
   transform: rotate(360deg);
   height: 0;
   opacity: 0;
}

Heres a codepen with these changes. https://codepen.io/Ballard/pen/EgYLKG