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

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

CSSでborder-top-widthをアニメーションさせる

CSSでは、要素の上側の境界線（ボーダー）の太さを指定するborder-top-widthプロパティも、アニメーションの対象にすることができます。@keyframesルールと組み合わせれば、境界線が徐々に太くなっていく滑らかなアニメーション効果を簡単に実現できます。

以下のサンプルコードでは、3秒間のアニメーションを無限に繰り返すよう設定し、再生の進行に合わせて上側の境界線の太さが10pxから50pxへと変化していきます。あわせて背景色や背景画像のサイズ、境界線の色も変化するようにしているので、複数のプロパティを同時にアニメーションさせる例としても参考になります。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 500px;
        height: 300px;
        background: yellow;
        border: 10px solid yellow;
        background-image: url('https://www.tutorialspoint.com/latest/Angular-4.png');
        animation: myanim 3s infinite;
        background-position: bottom left;
        background-size: 50px;
      }
      @keyframes myanim {
        20% {
          background-color: maroon;
          background-size: 90px;
          border-color: red;
          border-top-width: 50px;
        }
      }
    </style>
  </head>
  <body>
    <h2>境界線の太さのアニメーション</h2>
    <div></div>
  </body>
</html>

コードのポイント

  • animation: myanim 3s infinite; … 「myanim」という名前のキーフレームを3秒かけて再生し、無限に繰り返します。
  • @keyframes myanim … アニメーションの経過率20%の時点で適用されるスタイルを定義しています。
  • border-top-width: 50px; … 初期値の10pxから、アニメーション中に上側の境界線が50pxまで徐々に太くなります。

border-top-widthは数値で指定できるプロパティのため、CSSアニメーションやトランジションとの相性が非常に良いのが特徴です。ホバー時の装飾や注目させたい要素の演出など、動きのあるUIデザインにぜひ活用してみてください。

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

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

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

    CSSを使えば、transform プロパティにも簡単にアニメーションを適用できます。transform をアニメーション化することで、要素の回転・移動・拡大縮小などを滑らかで軽量な演出として表現可能です。ここでは、@keyframes と animation プロパティを組み合わせた基本的な実装方法を解説します。 実装のポイント @keyframes：アニメーションの進行度ごとに適用するスタイル（キーフレーム）を定義します。 animation：アニメーション名や再生時間（duration）などをまとめて指定できるショートハンドプロパティです。 transform：キーフレーム内で rot