CSSの検索と閉じるアイコンでアニメーション検索ボックスを作成する方法は？

Question

検索アイコンと閉じるアイコンでアニメーション検索ボックスを作成するにはどうすればいいですか？誰かが検索アイコンをクリックすると、検索ボックスはスムーズに展開され、閉じるアイコンをクリックすると、それが折りたたまれます。テキストを入力してから検索アイコンをクリックすると、検索フォームが送信されます。非常に良い例はhereです。

CSSとjQueryの両方のソリューションが評価されています。

Answer 1

ここでは、非常に良い例があります。役立つことを願っています。

http://icanbecreative.com/article/css3-animated-search-box/