【CSS】マウスオーバーでボーダーが要素の形に沿って表示されるアニメーション

では、解説していきます。

CSSで簡単実装！私が作成したマウスオーバーアニメーションまとめ

ボーダーアニメーションを表示する要素を作成する

まずは簡単にボタンやボックス要素をマークアップします。本記事ではaタグを使用していますが、class名を付けてあげると汎用的に使いまわせるかと思います。

HTML

<a href="#">Hover Me!</a>

以上でマークアップは完了です。続いて上記で用意した要素に、CSSでスタイルを付けていきます。

通常時・マウスオーバー時のスタイルを定義する

下記が実際に使用しているスタイルです。若干長くなってしまいましたので、簡単にですが補足させていただきます。

本記事でご紹介しているボーダーアニメーションは、疑似要素に予め設定したボーダーをマウスオーバーで表示することにより実現しています。

予め疑似要素の幅と高さをゼロにして透明のボーダーを設定しておき、マウスオーバー時にそれらをアクティブにしてトランジションアニメーションで表示しています。また、ボーダーが要素に沿って順番に表示されるように、transition-delayで開始時間がずれるようにしています。

CSS

a {
    position: relative;
    display: block;
    width: 320px;
    height: 57px;
    line-height: 57px;
    margin: 40px auto;
    text-align: center;
    text-decoration: none;
    color: #a8aabc;
    font-weight: bold;
    transition: .25s;
    box-shadow: 2px 2px 5px 0px rgba(200,200,200,1);
    background-color: #ffffff;
}
    
a::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 0;
    border: 2px solid transparent;
}
    
a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 0;
    height: 0;
    border: 2px solid transparent;
}

a:hover {
    color: #384878;
}
    
a:hover::before {
    width: 100%;
    height: 100%;
    border-top-color: #384878;
    border-right-color: #384878;
    transition: width .25s ease-out, height .25s ease-out .25s;
}

a:hover::after {
    width: 100%;
    height: 100%;
    border-bottom-color: #384878;
    border-left-color: #384878;
    transition: border-color 0s ease-out .5s, width .25s ease-out .5s, height .25s ease-out .75s;
}

最後に

いかがでしたでしょうか。

本記事の内容とは若干異なりますが、下記の記事でもボーダー系のマウスオーバーのアニメーションをご紹介していますので、併せてご確認いただければ幸いです。

【CSS】マウスオーバーで四辺のボーダーが伸びるアニメーション

以上、CSSでマウスオーバーでボーダーが要素を一周するアニメーションのご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

Follow @itpryohei