CSS疑似クラスのアニメーション

Question

私は、ホバーしたときに入力に変換する検索アイコンを作成しようとしています。擬似クラス::afterを虫眼鏡のハンドルとして使用しています。基本的には、アイコンが上に乗ったときにハンドルがスムーズに消えてしまいます。ここに私の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>

本当にありがとうございました！

Answer 1

スムーズに消えて鋭くないようにするには、以下の遷移時間を以下のように変更します。

#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; 
} 

そして、それがさらにスムーズに追加できるようにする。これらの変更と

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

相続人codepen。 https://codepen.io/Ballard/pen/EgYLKG

Answer 2

状態に推移しopacity: 0を追加

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

DEMO：https://jsfiddle.net/2691pjod/3/

---

スニペット

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>