[CSS] 要素のborderをなぞって進むアニメーションデザイン

CSSでのアニメーションで、簡単に動きを表現できるようになったホームページ制作ですが、自由度が高くなる一方難易度も上がっているように感じます。 でも、アニメーションを全く使わないwebサイトよりは、少しの箇所でもアニメーション処理があるだけでなんだか見ていて楽しくなる事は間違いありません。 もちろん、やり過ぎてウザくなる場合もあるので、どういうアニメーションをセットすればいいかというのは、デザインセンスに委ねられます。 でもあまり、ホームページで使えるアニメーションを紹介しているサイトは少ないので、そういうサイトがあれば、是非利用したいと思います。 いや、世の中に無いのであれば、自分で作るしかないでしょう。 というわけで、ホームページで使えそうなアニメーションを日々積み上げていきたいと思います。（不定期ですが・・・） 初回の今回は、border-trace-moveという命名で、ある要素のborderを沿って光点が移動するようなイメージで作ってみました。

ソースコード

index.html

<link rel='stylesheet' href='border-trace-move.css'/> <div id='box'></div>

border-trace-move.css

html,body{ width:100%; height:100%; } body{ display:flex; align-items:center; justify-content:center; } #box{ width:300px; height:300px; border:1px solid black; position:relative; } #box::before{ --size:15px; --bg:rgba(255,0,0,0.8); content:''; display:block; width:var(--size); height:var(--size); border-radius:50%; background-color:var(--bg); box-shadow:0 0 calc(var(--size) / 2) var(--bg); transform:translate(-50%,-50%); position:absolute; left:0; top:0; animation: 3.0s ease-in 0s infinite normal excursion; } @keyframes excursion{ 0%{ top:0; left:0%; } 25%{ top:0; left:100%; } 50%{ top:100%; left:100%; } 75%{ top:100%; left:0; } 100%{ top:0; left:0; } }

デモ

ノーマルパターン

タイトル文字の周りを回遊

※文字をマウスにのせると回遊表示します。

あとがき

cssを書ける人であれば、解説を入れるまでもない感じですが、なれない人はコピペして自分なりに変更してみましょう。 デモの表示は、ちょっとうるさいめのデザインにしていますが、落ち着いた色トーンとサイズとスピードにすることで、落ち着いたアニメーション表示になると思います。 タイトルなど目立たせたいときなどに使うと効果的ですよ。 他にも、マウスのhoverや、クリックなどのアクティブ処理として使うと良いかもですね。 お試しあれ。