素晴らしいCSSボーダーアニメーション
Cocoさんが、2022年7月22日に投稿し、7月23日に更新した記事です。
今日、shoptalkshowというブログサイトを訪れました。そこで目にしたスタイルは本当に面白かったです。
見た目がユニークで、特にビーズル（隅の飾り）がそうでした。
この記事では、CSSを使って色々な素晴らしいボーダー効果を実現してみましょう。
CSSボーダープロパティ
ボーダーと言えば、最も一般的なのは上の写真のようなsolidやdashedですね。
solidやdashedなど、CSSのボーダーではnone、hidden、dotted、double、groove、ridge、inset、そしてoutsetなど、様々なスタイルがサポートされています。noneやhiddenを外して、ネイティブでサポートされている全てのボーダースタイルを見てみましょう。
これらが基本です。他のスタイルのボーダーを実装したい場合や、ボーダーにアニメーションを追加したい場合は、その他のプロパティと協力するか、発想を広げる必要があります。では、いくつかの面白いボーダーを見てみましょう。
ボーダーの長さの変化
まずはシンプルなものから始めましょう。こんなボーダー効果を実現するには：
実際には、二つの擬似要素を使っています。擬似要素の上辺と左辺、下辺と右辺に設定し、マウスホバー時に擬似要素の高さと幅を変更するだけです。とてもわかりやすい。
div {
position: relative;
border: 1px solid #03A9F3;
&::before,
&::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
}
&::before {
top: -5px;
left: -5px;
border-top: 1px solid var(--borderColor);
border-left: 1px solid var(--borderColor);
}
&::after {
right: -5px;
bottom: -5px;
border-bottom: 1px solid var(--borderColor);
border-right: 1px solid var(--borderColor);
}
&:hover::before,
&:hover::after {
width: calc(100% + 9px);
height: calc(100% + 9px);
}
}
次はもう少し難易度を上げていきます。
点線ボーダーアニメーション
dashedキーワードを使って、簡単に点線のボーダーを作ることができます。
div {
border: 1px dashed #333;
}
もちろん、私たちが目指すのは動くボーダーです。dashedキーワードでは動かすことができませんが、CSSでは点線を実現する方法はたくさんあります。たとえば、グラデーションも良い方法です：
div {
background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
background-size: 4px 1px;
background-position: 0 0;
}
グラデーションを使ってシミュレートした点線は以下のようになります：
そして、グラデーションでコンテナの四辺全てを表現することもできます：
効果は以下の通りです：
ここで、私たちの点線アニメーションは実質上ほとんど完成しています。border-style: dashedではアニメーションはサポートされていませんが、グラデーションでは可能です。上記のdivにhover効果を追加し、hover時にanimationアニメーションを追加して、要素のbackground-positionを変えてみましょう。
最後に、実際のボタンに適用した効果を見てみましょう：
上記のデモの完全なコードは以下の通りです：
グラデーションを使った他のクールな用途
グラデーションで、上記の効果だけでなくもっと多くのことを実現できます。
グラデーションをさらに掘り下げて、このような背景を実現してみましょう：
次に、それに回転を加えます：
効果を見てみましょう：
最後に、中央をマスキングするための擬似要素を使えば、素敵なボーダーアニメーションが出来上がります（アニメーション中に半透明の要素が出てくるのは、原理を理解しやすくするためです）：
上述のデモの完全なコードは以下の通りです。私はこの効果を初めてこの作者から見ました -- Jesse B
CodePenデモ -- グラデーションボーダーアニメーション
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/chokcoco/fantastic-css-border-animation-5166
