この発想はすごい！モダンCSSで実装する、ボーダーをアニメーションさせるテクニック

Post on:2022年8月9日

はじめに

ボーダーをアニメーションさせるCSSのテクニックを紹介します。

ボーダーをアニメーションさせる仕組み

CSSにおけるボーダーの設定

CSSで要素にボーダーを実装するには、border, outline, box-shadowの3つのプロパティがあります。Modern CSS Solutionsで詳しく説明されているように、それぞれのプロパティ、特にボーダーをアニメーション化する場合は利点と欠点があります。

CSSのborderプロパティを使用しない主な理由は、このアニメーション化によるものです。

See the Pen
Animating outlines by Kevin (@kevinpowell)
on CodePen.

outline-offsetを使用したボーダーのアニメーション

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

私が最も注目したのは、この記事で使用されているビジュアルによる解説です。これは、そのエフェクトを得るために何が行われているかを理解するのに非常に役立ちます。

See the Pen
Rotating border by Chokcoco (@Chokcoco)
on CodePen.

疑似要素によるボーダーのアニメーションの仕組み

白いレイヤーと色のついた線は、どちらも生成されたコンテンツです。白いレイヤーをフェードインおよびアウトさせることで、それらがどのように重なり、どのようにアニメーションするのかが視覚的に理解できると思います。

ボックスモデルの保持

疑似要素によって生成されたコンテンツでボーダーを実装するときの欠点は、壊れたボックスモデルになってしまうことです。ボーダーは下に描画されているため、コンテンツが偽のボーダーを覆い隠す可能性があります。これを回避するにはborder-widthをpaddingとして適用します。

真のボーダーを作成し、ボックスモデルの機能を維持するには、複数の背景を使用して、ボーダーのエリアまで引き伸ばします。

基本となるCSS

まずは、点線のボーダーを作成し、複数の背景を実装します。

/* ボーダーのサイズ */
--border-size: 0.5rem;

/* 点線のボーダーを作成 */
border: var(--border-size) dotted lime;

/* 複数の背景を作成:
   1. ホワイトの半透明
   2. 色付きのボックスを含むレイヤー
 */
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
  )
;

/* ボーダーのサイズ */

--border-size: 0.5rem;

/* 点線のボーダーを作成 */

border: var(--border-size) dotted lime;

/* 複数の背景を作成:

1. ホワイトの半透明

2. 色付きのボックスを含むレイヤー

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

)

;

これで下記のようになります。

See the Pen
css-border-animations #1 by web.dev (@web-dot-dev)
on CodePen.

background-originで背景をサイズ調整

上記デモでは背景はボーダーに描画されていますが、conic-gradientは間違っているように見えます。しかし、これは意図された動作です。デフォルトでは背景画像は要素のpadding-boxであるため、ボーダーに描画されません。つまり、ボーダーを作成するために、設定された背景画像はボーダー自体で繰り返され、奇妙な視覚効果が得られます。

この問題を解決するには、ボーダーのサイズを占めるように背景を引き伸ばす必要があります。背景を引き伸ばして再配置することで手動でもできますが、background-originプロパティを使用してborder-boxに対して背景のサイズを調整するのが最もよい方法です。

background-originのサポート状況

これはよろしくない例です。

/* 手動で調整する方法 */
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-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%);

こちらのCSSがベストです。

background-origin: border-box;

1	background-origin: border-box;

このCSSを追加することで、すべての見栄えが大幅に向上します。

See the Pen
css-border-animations #2 by web.dev (@web-dot-dev)
on CodePen.

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

これで背景がすべてのスペースを占めるようになったので、半透明のレイヤーを再び縮小する必要があります。それにはbackground-sizeを調整するよりも、簡単な簡単があります。background-clipを使用してpadding-boxに設定します。そうすれば、背景がボーダーの下に描画されることはなくなります。

background-clipのサポート状況

CSSは、下記の通りです。

background-clip:
  padding-box, /* padding-boxに白い半透明をクリップ */
  border-box /* border-boxに色付きのボックスをクリップ (デフォルト)*/
;

background-clip:

padding-box, /* padding-boxに白い半透明をクリップ */

border-box /* border-boxに色付きのボックスをクリップ (デフォルト)*/

;

これで下記のようになります。

See the Pen
css-border-animations #3 (background-clip comparison) by web.dev (@web-dot-dev)
on CodePen.

最後に、ボーダーを透明にしてエフェクトを最大限に引き出します。

border: 0.3rem dotted transparent;

1	border: 0.3rem dotted transparent;

See the Pen
css-border-animations #4 by web.dev (@web-dot-dev)
on CodePen.

アニメーションの設定

ボーダーのアニメーションを設定するには、conic-gradientの開始角度を設定します。

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

--angle: 0deg;

conic-gradient(

from var(--angle),

#d53e33 0deg 90deg,

#fbb300 90deg 180deg,

#377af5 180deg 270deg,

#399953 270deg 360deg

);

@propertyのおかげで、このプロパティをサポートするブラウザに対して簡単に使用できるようになりました。

@propertyのサポート状況

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {

syntax: "<angle>";

initial-value: 0deg;

inherits: false;

}

@keyframes rotate {

to {

--angle: 360deg;

}

ここまでのCSSを全部組み合わせると、下記のようになります。

See the Pen
css-border-animations #5 (animation) by web.dev (@web-dot-dev)
on CodePen.

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

以前、グラデーションのボーダーを描画する方法として、CSSのborder-imageを使用する方法を解説しました。

CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法
※当ブログで翻訳しました。

背景の重なりを処理する必要がないため、CSSのコードをより単純化できます。アニメーションも同じ方法で適用できます。

/* ボーダーを作成 */
border: 0.5rem solid transparent;

/* ボーダーに画像を描画 */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;