CSS border-image アニメーション完全ガイド ― @property で枠線を描画する実装パターン

border-image でアニメーションする理由

枠線にアニメーションを付ける方法は複数あります。mask を使う手法、conic-gradient を background に敷いて padding で中をくり抜く手法、outline を利用する手法などです。

その中で border-image が優れている点は、上下左右の枠線に同一デザインを自動で複製してくれることです。四辺を個別に調整する必要がありません。さらに border-image-slice で画像を分割してタイル化できるため、繰り返しパターンのアニメーションでは記述量が大幅に削減できます。

一方で大きな制約もあります。border-image は border-radius に追従して曲がりません。 角丸カードを囲むアニメーションを実装する場合は、この点を前提とした設計が必要です。本記事では角張ったカードコンポーネントを対象に、実務で扱いやすいパターンを紹介します。

本記事は 根拠資料 の border-image アニメーションのアイデアを、実装視点で再構成したものです。

Step 1: カードのベースレイアウト

まずアニメーション対象となるカードを用意します。HTML はシンプルです。

<div class="card">
  <p>Bruce Wayne</p>
</div>

CSS でサイズと背景画像を設定します。aspect-ratio を使うと、レスポンシブ時も比率が崩れません。

.card {
  width: 150px;
  aspect-ratio: 0.69;
  position: relative;
  background: center / 90% no-repeat;
  background-image: url("batman.jpg");
}

テキストが背景に重なると可読性が落ちるため、位置を調整します。

.card p {
  position: absolute;
  bottom: 8px;
  left: 8px;
  margin: 0;
  font-size: 12px;
  color: #fff;
}

Step 2: border-image で枠線を描画する

ポイントは border-image-source にグラデーションを指定することです。初期状態は完全に透明にしておき、hover 時に色が埋まっていくようにします。

.card {
  /* 上記のベーススタイルを維持 */

  /* 枠線として使うグラデーション */
  border-image-source: linear-gradient(-45deg, red 0%, transparent 0%);
  /* グラデーションをどう分割するか（1px 単位のスライス） */
  border-image-slice: 1;
  /* 枠線の太さ */
  border-image-width: 5px;
  /* カードと枠線の間隔 */
  border-image-outset: 5px;
}

border-image-slice: 1 は「グラデーションを 1px 単位で分割し、枠線全体に敷き詰める」という意味です。border-image-outset: 5px は枠線をカードの外側に 5px 押し出して余白を作ります。

なぜカスタムプロパティの登録が必要か

グラデーションの開始点・終了点（パーセント）は、デフォルトではアニメーションできません。ブラウザが「パーセント間の補間」方法を知らないためです。そこで @property を使い、アニメーション可能な変数を明示的に宣言します。

@property --p {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

この --p をグラデーションに組み込み、hover 時に 100% まで伸ばせば、枠線が自ら描かれていく効果が完成します。

.card {
  border-image-source: linear-gradient(-45deg, red var(--p), transparent 0%);
  border-image-slice: 1;
  border-image-width: 5px;
  border-image-outset: 5px;
  transition: --p 0.6s ease;
}

.card:hover {
  --p: 100%;
}

transition-property に --p を明示すると、ブラウザがどの変数を補間すべきか正確に把握でき、パフォーマンス面でも有利です。

Step 3: conic-gradient で応用する

linear-gradient でも十分美しいですが、conic-gradient を使うと「回転する枠線」というまったく異なる表現が可能です。今回はスライス値（--n）と角度（--a）の2つをアニメーションします。

@property --n {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}

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

.card {
  border-image-source: conic-gradient(from var(--a), red var(--a), transparent 0%);
  border-image-width: 5px;
  border-image-slice: var(--n);
  border-image-repeat: round; /* スライスをタイル化 */
  transition-property: --n, --a;
  transition-duration: 0.6s;
}

.card:hover {
  --n: 20;     /* スライス厚を増加 → 枠線に節ができる */
  --a: 360deg; /* グラデーションが一周回転 */
}

border-image-repeat: round は、スライスした断片を枠線内に整数個でタイル配置します。割り切れない場合はわずかに伸縮してフィットさせます。この指定により、hover 時に枠線へ規則的な「節」が現れるのが確認できます。

実務上の注意点

• border-radius との相性が悪いです。 角丸カードにこの手法をそのまま適用すると、枠線が角張って見えます。角丸 UI が必要な場合は mask ベースのアプローチを別途検討してください。
• @property は比較的新しいブラウザ機能です。 Chrome、Edge、Safari 16.4+、Firefox 128+ 程度が必要です。旧ブラウザ向けのフォールバックを用意する場合は、hover 時に色だけ変わるシンプル版をデフォルトにしておくと安全です。
• transition-property にカスタムプロパティを明示してください。 指定しないとブラウザが全プロパティを監視し、パフォーマンスが低下する可能性があります。
• prefers-reduced-motion への対応を忘れずに。 アクセシビリティの観点から、アニメーションを無効化するメディアクエリを追加することを推奨します。

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

日本の開発現場における適用例

日本の受託開発やエンタープライズ案件では、依然としてレガシーブラウザ（特に社内 IE 互換モード）対応の要件が出ることがあります。@property が動作しない環境ではアニメーションが一切表示されないため、「hover 時に枠線の色だけ変わる静的フォールバック」 を基本とし、@supports で条件付きにリッチ版を重ねる戦略が安全です。ブラウザ仕様を統制できるマーケティング向けランディングページなどから試験導入するのがおすすめです。

まとめ

border-image アニメーションの要点は次の3つです。

1. border-image-source にグラデーションを指定し、border-image-slice で分割して枠線に敷き詰める。
2. @property でアニメーション可能なカスタム変数を宣言する。
3. hover 時に変数値を変更し、枠線が自ら描かれる／回転するようにする。

border-radius との併用時の制約さえ把握しておけば、記述量に対する視覚的インパクトが非常に大きい手法です。カード UI、プロフィールウィジェット、サムネイルの hover エフェクトなどに、そのまま応用できます。

次のステップ

• repeating-linear-gradient と組み合わせて「流れる斜線パターン枠線」を作る
• conic-gradient のカラーストップを3色以上に増やし、虹色回転枠線を作る
• border-image-repeat の stretch / repeat / round / space の4値を比較検証する
• アニメーションを hover だけでなく :focus-visible にも適用し、キーボードアクセシビリティも担保する

あわせて読みたい

• AWS 欧州ソブリンクラウド、デジタル主権のためのクロスパーティション・フェイルオーバー設計ガイド — インフラ設計の観点からフロントエンド性能設計を見直したい方へ。
• Pantone がエージェント AI で色の専門性を拡張した方法 ― AI-Ready データベースの核心的役割 — 色とデータを扱う視点に興味がある方はぜひ。