このページは Cloud Translation API によって翻訳されました。

CSS 枠線アニメーション

CSS で枠線をアニメーション化する方法をいくつか紹介

Bramus

枠線の設定

要素に枠線を設定するには、border、outline、box-shadow のメソッドを使用できます。Stephanie Eckles 著の The 3 CSS Methods for Additional Element Borders に詳述されているように、どの方法にも、特に枠線のアニメーション化に関しては、それぞれ利点と欠点があります。適切な CSS border を使用しない主な理由は、アニメーション化です。

outline-offset を使用したボーダーアニメーション（Kevin J. Powell

最近注目した記事は、Fantastic CSS border animation です。著者の Coco が、さらに多くのオプションを探っています。::before と ::after を使用して生成されたコンテンツを挿入することで、偽のボーダーを作成してアニメーション化します。

特に目を引くのは、この記事で使用されたアニメーションによる可視化です。目的の効果を達成するために具体的に何が行われているのかを説明するのに役立ちます。

Coco によって生成されたコンテンツを使用したボーダーアニメーション

白いレイヤと色付きの線はどちらも生成されたコンテンツです。白いレイヤをフェードインおよびフェードアウトすることで、それらがどのように積み重ねられ、アニメーションの動作が明確になります。

ボックスモデルを保持する

生成コンテンツを使用して境界線を模倣するデメリットは、ボックスモデルが破損することです。この「境界線」は下側に描画されるため、コンテンツが偽の境界線を覆い隠す可能性があります。軽減するには、目的の 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 で境界をアニメーション化する方法は多数あります。ユースケースに応じて、どちらか一方に傾く場合があります。

CSS 枠線アニメーション

枠線の設定

ボックスモデルを保持する

基本情報

background-origin で背景のサイズを設定

background-clip で白い背景レイヤを縮小

アニメーション

ボーナス コンテンツ: border-image

まとめ

`background-origin` で背景のサイズを設定

`background-clip` で白い背景レイヤを縮小

ボーナスコンテンツ: `border-image`