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

CSSでborder-topプロパティをアニメーションさせる方法

CSSの border-top プロパティは、@keyframes ルールと組み合わせることでアニメーションさせることができます。要素の上側の境界線の太さや色を時間の経過とともに変化させることで、動きのある視覚効果を実現できます。

実装のポイント

  • @keyframes ルール内でアニメーションの各段階（パーセンテージ）における border-top の状態を定義します。
  • animation プロパティで、適用するキーフレーム名・ duration ・繰り返し回数などを指定します。
  • サンプルコードでは「3s infinite」として、3秒間のアニメーションを無限に繰り返す設定にしています。

サンプルコード

以下のコードでは、テーブルの border-top プロパティをアニメーションさせています。ブラウザで実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table,th,td {
            border: 1px solid black;
         }
         #newTable {
            width: 500px;
            height: 300px;
            background: yellow;
            border: 15px solid yellow;
            animation: myanim 3s infinite;
            background-position: bottom left;
            background-size: 50px;
         }
         @keyframes myanim {
            30% {
               background-color: orange;
               border-right-color: red;
               border-right-width: 25px;
               border-spacing: 50px;
               border-top: 125px solid red;
            }
         }
      </style>
   </head>
   <body>
      <h2>上側のボーダーのアニメーション</h2>
      <table id = "newTable">
         <tr>
            <th>科目</th>
            <th>学生</th>
            <th>点数</th>
         </tr>
         <tr>
            <td>数学</td>
            <td>Amit</td>
            <td>98</td>
         </tr>
         <tr>
            <td>理科</td>
            <td>Sachin</td>
            <td>99</td>
         </tr>
      </table>
   </body>
</html>

コードの解説

この例では、#newTable に対して myanim というキーフレームアニメーションを適用しています。アニメーションが30%進んだ時点で、背景色がオレンジ色に変わり、border-top が「125px の赤い実線」へと変化します。これにより、テーブルの上側の境界線が太く伸びながら色が変わるアニメーションが無限に繰り返されます。

border-top だけでなく、border-right-color や border-right-width など、他のボーダー関連プロパティも同じキーフレーム内で同時にアニメーションできる点にも注目してください。複数のプロパティを組み合わせることで、よりリッチな表現が可能になります。

  1. CSSのtext-decoration-colorプロパティで下線の色をアニメーションさせる方法

    CSSのtext-decoration-colorプロパティは、テキストに表示される下線・上線・取り消し線などの装飾線の色を個別に指定できるプロパティです。この値を@keyframesと組み合わせて変化させることで、下線の色が滑らかに移り変わるアニメーション効果を実現できます。 実装例：text-decoration-colorのアニメーション 以下のコードでは、青い背景のボックスを右へ移動させながら、同時に下線の色をオレンジ色へと変化させています。animationプロパティで「3秒間・無限ループ」の設定にしているため、アニメーションは繰り返し再生されます。 <!DOCTYPE htm

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

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