CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでborderプロパティをアニメーション化する方法

CSSでは、@keyframesルールとanimationプロパティを組み合わせることで、要素の境界線（border）にもアニメーション効果を加えることができます。borderの太さ、スタイル（dashedやsolidなど）、色はすべてアニメーションの対象にでき、ホバー時の演出や注目させたい要素の強調などに活用できます。

実装のポイント

以下のサンプルコードでは、次のような仕組みでアニメーションを実現しています。

  • @keyframes myanim：アニメーションの途中経過（20%の時点）における背景色、背景位置、背景サイズ、そしてborderの状態を定義しています。
  • animation: myanim 3s infinite;：定義したキーフレームを3秒かけて再生し、無限に繰り返すよう指定しています。
  • border：初期状態では「5px dashed yellow」ですが、アニメーション中は「25px solid orange」へと変化し、線が太くなりスタイルと色も切り替わります。

それでは、実際に以下のコードを実行して動作を確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 500px;
            height: 400px;
            background: yellow;
            border: 5px dashed yellow;
            background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');
            animation: myanim 3s infinite;
            background-position: bottom left;
            background-size: 50px;
         }
         @keyframes myanim {
            20% {
               background-color: maroon;
               background-position: bottom right;
               background-size: 90px;
               border: 25px solid orange;
            }
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

動作の解説

このコードを実行すると、黄色い破線の境界線を持つ要素が表示され、3秒周期で以下のように変化していきます。

  • アニメーション開始から20%のタイミング（約0.6秒後）で、境界線が「25px solid orange」へと滑らかに遷移し、太さ・スタイル・色が同時に変化します。
  • 同時に、背景色がマルーン（栗色）に変わり、背景画像の位置とサイズも変化します。
  • infiniteが指定されているため、この一連の変化が無限に繰り返されます。

なお、border-style（dashed→solid）の変化は補間されずに瞬時に切り替わる点に注意してください。一方、border-widthとborder-colorは数値・色として補間されるため、滑らかなアニメーションになります。用途に応じてtransitionプロパティを使えば、マウスオーバー時など特定の操作に連動した境界線アニメーションも簡単に実装できます。

  1. CSSのborder-imageプロパティ完全ガイド｜画像ボーダーの使い方とブラウザごとの注意点

    CSSのborder-imageプロパティは、初めて触れるときには少し理解しづらいプロパティの一つです。この記事では、border-imageプロパティとは何か、その基本的な使い方、そしてブラウザごとの特有の挙動について詳しく解説します。 borderプロパティのおさらい まず前提として、CSSの学習を進めていれば「border」プロパティはすでにご存じでしょう。おさらいとして、borderは要素の周囲に枠線を指定するためのショートハンド（一括指定）プロパティで、次のような構造を持っています。 border: 2px /* 幅 */ dashed /* スタイル

  2. CSSのwidthプロパティをアニメーション化する方法

    CSSで要素の width（幅）プロパティをアニメーションさせるには、@keyframes ルールと animation プロパティを組み合わせて使用します。幅の変化を滑らかに表現することで、開閉パネルやホバーエフェクトなど、さまざまなインタラクティブな演出が可能になります。実装のポイント@keyframes 内で、アニメーションの途中経過（例：30%）における幅の値を指定します。animation プロパティで、キーフレーム名・再生時間などを設定します。幅は数値（px など）で指定するため、ブラウザは値の補間を行い滑らかなアニメーションを実現します。サンプルコード以下のコードでは、div要素