CSS3のみで検索フォームに開閉するアニメーションを実装する方法

jQueryは使わずに、CSS3のみで開閉動作を実装する方法を解説します。

[前回の記事]"アニメーションしながら開閉する検索フォーム"では、jQueryを使って検索フォームに開閉するアニメーションを実装しましたが、今回は一切使用せずCSS3のみで実装するためスマートフォンでも軽快に動作します。

始めにデモをご覧ください。

完成デモ

テキストフォームをクリックするとアニメーションしながら開き、テキストフォーム以外のどこかをクリックすると、アニメーションしながら閉じることが確認できます。

続いて、各ソースコードを解説します。

始めにHTMLです。

HTML

HTMLは検索フォームのマークアップのみです。

次にCSSです。

CSS

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:after {
    content:"";
    clear:both;
    display:block;
}

#searchform { 
  margin:0 auto;
  width:300px;
  position:relative;
}

#keyword,
#submit {
  border:none;
  padding:10px;
  position:absolute;
}

#keyword {
  border-radius:10px 0 0 10px;
  background:#dfdfdf;
  right:20%;
  transition:all 0.3s;
  width:20%;
}

#keyword:focus {
  width:80%;
}

#submit {
  border-radius:0 10px 10px 0;
  background:#0E7AC4;
  color:#fff;
  font-family:FontAwesome;
  right:0;
  width:20%;
}

• #keywordと#submitの両方にrightプロパティを指定している訳は、どちらも右端に配置することで、アニメーションの際に、テキストフォームが右から左へ開くようにするためです。
• テキストフォームの通常時の横幅を20%にしています。後にクリックすると横幅を伸ばすためです。
• #keywordにtransition:all 0.3s;と指定することで、アニメーションのスピードを定義しています。
• #keyword:focus { width:80%; }と記述することで、テキストフォームがクリックされたときに、横幅が20%から80%に伸びます。

以上です。