CSSによるマウスオーバーの罫線アニメーション

マウスオーバーの罫線アニメーションをCSSで実装する方法をご紹介します。

• ※ IEはtransitionを使用するため10以降に対応しています。

下線

中央から左右へ

sample

左から右へ

sample

右から左へ

sample

上下線

中央から左右へ

sample

左から右へ

sample

右から左へ

sample

上は左から右、下は右から左へ

sample

上は右から左、下は左から右へ

sample