覚えておきたいと思ったので備忘録兼ねて。「Awesome input focus effects」はinputやtextareaといった入力欄へフォーカスした際のアニメーションをまとめているもので、3グループ・全24種類のエフェクトがあります。もちろん人によりますが、個人的にはいずれもシンプルな動き（見た目）に思うので、どのタイプのサイトでも取り入れられるように思います。
エフェクトの種類は大きく3グループにわかれており、ボーダーをアニメーションさせる「Border effects」、背景を変化させる「Background Effects」、「Border effects」や「Background Effects」の動きに加えラベルにアニメーションをつけた「Input with Label Effects」となっています。
実際の動きは後述するデモで確認できますが一部動きを紹介すると、例えば「Border effects」の各フォーカス時の動きは上のイメージのような感じになっています。
アニメーションは基本的にCSSのみで実装する感じになっており、「Input with Label Effects」で紹介されているものを使用したい場合はjQueryを併用する必要がありますが、記述する内容は簡易的なものです。
紹介元では実際の動きを確認できるデモが用意されており、更にファイルをダウンロードすることもできます。
ダウンロードしたファイルを利用してそのまま動きをコピペで実装することもできますし、例えばフォーカス前後の動きを入れ替えるなどちょっといじることでデモにはない動きも実装することができそうです。