旅行HOMEHTML/CSS【CSS】マウスオーバーでボーダーが要素の形に沿って表示されるアニメーション【CSS】マウスオーバーでボーダーが要素の形に沿って表示されるアニメーション2020.02.08HTML/CSSBこんにちは、ryohei(@ityryohei)です!本記事ではマウスオーバーでボーダーが要素を一周するアニメーションをご紹介しています。詳しく説明すると、ボタンやボックスといった要素をマウスオーバーすると、要素の外周に沿ってボーダーが描画されるアニメーションです!......と言われても文字だけで想像するのは結構難しいですよね。簡単なデモをご用意させていただきました。Me!」と記載されたボタンのようなリンクにマウスカーソルを合わせてみてください。スマホの方はタップでお願いします。CodePen.いかがでしょうか。Me!」と記載された要素にカーソルを合わると、要素の外周を沿うような形でボーダーが描画されたかと思います。要素がクリックされるかはさておき、つい最後まで見てしまいますよね!このアニメーションを要素に設定しておくことで閲覧者の注目を集めることができるかと思います!本記事の内容ボーダーアニメーションを表示する要素を作成する通常時・マウスオーバー時のスタイルを定義する最後にでは、解説していきます。CSSで簡単実装!私が作成したマウスオーバーアニメーションまとめボーダーアニメーションを表示する要素を作成するまずは簡単にボタンやボックス要素をマークアップします。本記事ではaタグを使用していますが、class名を付けてあげると汎用的に使いまわせるかと思います。Me!</a>以上でマークアップは完了です。続いて上記で用意した要素に、CSSでスタイルを付けていきます。通常時・マウスオーバー時のスタイルを定義する下記が実際に使用しているスタイルです。若干長くなってしまいましたので、簡単にですが補足させていただきます。本記事でご紹介しているボーダーアニメーションは、疑似要素に予め設定したボーダーをマウスオーバーで表示することにより実現しています。疑似要素の幅と高さをゼロにして透明のボーダーを設定しておき、マウスオーバー時にそれらをアクティブにしてトランジションアニメーションで表示しています。ボーダーが要素に沿って順番に表示されるように、transition-delayで開始時間がずれるようにしています。.75s;}最後にいかがでしたでしょうか。本記事の内容とは若干異なりますが、下記の記事でもボーダー系のマウスオーバーのアニメーションをご紹介していますので、併せてご確認いただければ幸いです。Webエンジニアご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。