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

モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。

モダンCSSで実装する、ボーダーをアニメーションさせるテクニック

CSS border animations
by Bramus

下記は各ポイントを意訳したものです。
※元サイト様のライセンスにもとづいて翻訳しています。

はじめに

ボーダーをアニメーションさせる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-widthpaddingとして適用します。

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

基本となるCSS

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

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

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-originのサポート状況

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

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

この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のサポート状況

background-clipのサポート状況

CSSは、下記の通りです。

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

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

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

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

アニメーションの設定

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

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

@propertyのサポート状況

@propertyのサポート状況

ここまでの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のconic-gradient()関数を使用した美しいグラデーションの実装方法
※当ブログで翻訳しました。

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

このデモでは、border-imageを使用した本物のボーダーと背景、そして最後にHoudiniを使用したアニメーションを解説しています。

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

ただし、この実装では機能しないことがいくつかあります

  • border-imageborder-radiusに従わず、常に矩形です。
  • border-image-slicefillに設定すると、border-imageは設定された背景の下ではなく、上に描画されます。これは、背景を半透明にしたい場合には厄介です。

終わりに

CSSでボーダーをアニメーションさせる可能性は、たくさんあります。用途に応じて、あなたはどちらか一方に傾くかもしれません。

sponsors

top of page

©2022 coliss