Animate CSS Pseudo Class - html

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

Answer 2

Add an opacity: 0 to hover state
#magnifying-glass:hover::after {
transform: rotate(360deg);
height: 0;
opacity: 0;
}
DEMO: https://jsfiddle.net/2691pjod/3/
Snippet
body {
text-align: center;
background: #fff;
}
#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;
border-radius: 10px;
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::after {
transform: rotate(360deg);
height: 0;
opacity: 0;
}
#magnifying-glass:hover input {
display: block;
}
<div id="magnifying-glass">
<input type="text" placeholder="Search">
</div>