ボーダーアニメーション効果を実装できるCSSコードスニペット8選枠線に動きをつけるサンプル

ボーダー（枠線）をサイトに入れることは、画像やコンテナ要素への仕上げのようなささいなディテールで飾り程度とみなされ注目されることもありませんでした。ところが、CSSが進化するにつれて、さらなる可能性が見えてきました。

今までよりも彩り豊かで特殊な効果のものが増え、ボーダーを活用すれば注目すべき情報へ自然に注意を引くことができます。また、ユーザーエンゲージメントとマイクロインタラクションでも活躍します。というわけでCSS（やJavaScript）が提供する優れた機能でパワーアップしたボーダーの例を見ていきましょう。

SVG Border Magic

SVG画像は、さまざまな画面サイズで動作させられ、クールなエフェクトを加えるのにとてもいい秘密兵器となります。コンテナのサイズと形状に自動的に適応するマルチカラーのアニメーションボーダーが可能です。要素のサイズを大きくしたり小さくしたりしても、ボーダーは維持されます。

See the Pen
CSS border (using an SVG) by Louis Hoebregts (@Mamboleoo)
on CodePen.

Fascinating Transitions
ボーダー柄のボタンをある色から別の色へ変化させられま

リンク元