CSS で枠線をアニメーション化する方法をいくつか紹介
枠線の設定
要素に境界を設定するには、border
、outline
、box-shadow
のいくつかの方法があります。Stephanie Eckles の 要素の境界線を追加する 3 つの CSS 方法で詳しく説明されているように、各アプローチにはそれぞれ長所と短所があります。特に、境界線をアニメーション化する場合は顕著です。適切な CSS border
を使用しない場合の主な理由は、アニメーションを目的としている場合です。
最近注目した記事は、Fantastic CSS border animation です。著者の Coco が、さらに多くのオプションを探っています。::before
と ::after
を使用して生成されたコンテンツを挿入することで、偽のボーダーを作成してアニメーション化します。
記事で使用されているアニメーション化された補足データが特に印象的でした。目的の効果を達成するために具体的に何が行われているのかを説明するのに役立ちます。
白いレイヤと色付きの線はどちらも生成されたコンテンツです。白いレイヤをフェードイン / フェードアウトすることで、レイヤの重なりとアニメーションの仕組みが明確になります。
ボックスモデルを保持する
生成コンテンツを使用して境界線を模倣するデメリットは、ボックスモデルが破損することです。この「境界線」は下側に描画されるため、コンテンツが偽の境界線を覆い隠す可能性があります。これを軽減するには、目的の border-width
を padding
として適用する必要があります。
実際のボーダーを作成してボックスモデルの動作を維持するには、複数の背景を使用して、ボーダー領域に伸ばします。
基本情報
まず、点線の枠線を作成して、複数の背景を追加しましょう。
/* Size of the border */
--border-size: 0.5rem;
/* Create a dotted border */
border: var(--border-size) dotted lime;
/* Create two background layers:
1. A white semi-transparent
2. A layer with the colored boxes
*/
background-image:
linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),
conic-gradient(
from 45deg,
#d53e33 0deg 90deg,
#fbb300 90deg 180deg,
#377af5 180deg 270deg,
#399953 270deg 360deg
)
;
background-origin
で背景のサイズを設定
ご覧のとおり、背景に問題があります。境界に塗りつぶされていますが、conic-gradient
がすべて間違っているようです。これは実際には想定された動作です。デフォルトでは、背景画像のオリジンは要素の padding-box
であるため、境界内に描画されません。境界を作成するため、設定した背景画像が境界自体で繰り返され、奇妙な視覚効果が生じます。
この問題を解決するには、背景を伸ばして、境界のサイズも占有するようにする必要があります。バックグラウンドを伸ばして位置を調整することで手動で行うこともできますが、background-origin
プロパティを使用して border-box
に合わせてバックグラウンドのサイズを調整することをおすすめします。
/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);
background-origin: border-box;
次の 1 つを追加するだけで、すべてが大幅に改善されます。
background-clip
で白い背景レイヤを縮小
背景がすべてのスペースを占有するようになり、半透明のレイヤを再度縮小する必要があります。background-size
を再度操作する代わりに、background-clip
を使用して padding-box
に設定するほうが簡単です。これにより、境界線の領域の下に背景が描画されなくなります。
background-clip:
padding-box, /* Clip white semi-transparent to the padding-box */
border-box /* Clip colored boxes to the border-box (default) */
;
最後に、境界を transparent
にして、効果を最大限にします。
border: 0.3rem dotted transparent;
アニメーション
境界のアニメーションを復元するには、conic-gradient
の開始角度を操作します。
--angle: 0deg;
conic-gradient(
from var(--angle),
#d53e33 0deg 90deg,
#fbb300 90deg 180deg,
#377af5 180deg 270deg,
#399953 270deg 360deg
);
@property を使用すると、これをサポートしているブラウザでは簡単に実現できます。
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate {
to {
--angle: 360deg;
}
}
すべてを組み合わせると、コードは次のようになります。
ボーナス コンテンツ: border-image
グラデーション ボーダーを描画する以前に説明した方法は、CSS border-image
を使用する方法です。
重なり合う背景を処理する必要がないため、コードを簡素化できます。アニメーションは以前と同じ方法で適用できます。
/* Create a border */
border: 0.5rem solid transparent;
/* Paint an image in the border */
border-image:
conic-gradient(
from var(--angle),
#d53e33 0deg 90deg,
#fbb300 90deg 180deg,
#377af5 180deg 270deg,
#399953 270deg 360deg
) 1
;
ただし、この方法では、いくつかの機能が動作しなくなります。
border-image
はborder-radius
に続かず、常に長方形のままになります。border-image-slice
を塗りつぶしに設定すると、border-image
は設定されたbackground
の下に塗りつぶされるのではなく、上に塗りつぶされます。背景を半透明にしたい場合は、この方法は不便です。
まとめ
CSS で境界をアニメーション化する方法は多数あります。ユースケースに応じて、どちらか一方に傾く場合があります。