ホバーアニメーションなんていってますが、
いわゆるある要素にマウスオーバーすると、要素が色変わったり、大きくなったりするやつで、それをcssやらjavascriptなんかでアニメーションさせる動きのことです。

今弊社サイトのブログ一覧では、ホバーするとグレースケールになりますが、
それをボーダーで出来ないかと考えてみました。

ボーダーを色を変えるのは当たり前のように出来るのですが、
CSSだけで簡単に横から変わっていったりといった動きをつけられるかを試してみました。

borderのプロパティだけでは色をゆっくり変えるくらいしか出来ませんでした。
（誰かおしえて下さい）

出来ないで終わってしまうのもなんなので、違うやり方で、ボーダーがアニメーションしている感じを表現しました。

下記から御覧ください！！
時間がなかったため、すごい簡単なのしか出来ませんでした・・・

DEMO

擬似要素とdivを重ねて表現しています。

ソースは下記になります。
※DEMOの「横からアニメーション」のソースになります。

html

css

もっとカッコイイのをやりたい場合は、
他を検索してみてください笑

コードが複雑になりますが、スタイリュッシュな表現もCSSだけで出来るようです！