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

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

CSSの border-top-left-radius プロパティは、要素の左上隅の角丸を指定するプロパティです。この値はアニメーション可能なため、@keyframes ルールと組み合わせることで、角が徐々に丸くなっていくような滑らかなアニメーション効果を実現できます。

border-top-left-radiusのアニメーションの基本

アニメーションを実装するには、以下の手順に従います。

  • 対象の要素に animation プロパティを設定し、アニメーション名・ duration ・繰り返し回数を指定します。
  • @keyframes ルール内で、特定のキーフレーム（例：30%）における border-top-left-radius の値を定義します。

実装例

以下のコードでは、テーブルの左上の角丸が3秒かけて150pxまで変化するアニメーションを無限に繰り返します。あわせて背景色やボーダーの色も変化させ、視覚的にわかりやすくしています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 2px 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-spacing: 50px;
               border-top-color: red;
               border-top-left-radius: 150px;
            }
         }
      </style>
   </head>
   <body>
      <h2>border-top-left-radiusのアニメーション</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>

コードのポイント解説

1. アニメーションの適用

#newTable セレクター内の animation: myanim 3s infinite; により、「myanim」という名前のアニメーションが3秒間かけて無限に繰り返されます。

2. キーフレームの定義

@keyframes myanim 内の 30% では、アニメーション開始から30%経過した時点でのスタイルを指定しています。ここで border-top-left-radius: 150px; を設定することで、左上の角が徐々に大きく丸まっていきます。

3. 複数プロパティの同時アニメーション

同じキーフレーム内で background-color（黄色→オレンジ）や border-top-color（黄色→赤）も変化させており、複数のプロパティを同時にアニメーションできることも確認できます。

まとめ

border-top-left-radius は @keyframes を使うことで簡単にアニメーション化できます。他の角丸プロパティ（border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius）や一括指定の border-radius でも同様の手法が使えるので、カードUIやボタンなど、さまざまな場面で応用してみてください。

  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要素