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

CSSでheight（高さ）プロパティをアニメーションさせる方法

CSSで要素のheight（高さ）プロパティをアニメーションさせたい場合は、@keyframesルールとanimationプロパティを組み合わせて使います。以下のサンプルコードを実行すると、div要素の高さが一定間隔で滑らかに変化するアニメーションを確認できます。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 2px solid black;
        width: 300px;
        height: 100px;
        animation: myanim 5s infinite;
      }
      @keyframes myanim {
        30% {
          height: 400px;
        }
      }
    </style>
  </head>
  <body>
    <div>This is demo text</div>
  </body>
</html>

コードの解説

@keyframes myanimでは、アニメーションの進捗30%の時点で高さを100pxから400pxへ変化させています。animationプロパティに「5s（5秒間）・infinite（無限リピート）」を指定しているため、高さの伸縮が繰り返し再生されます。

補足ポイント

  • height: autoは数値でないため、そのままではスムーズなアニメーションの対象になりません。具体的なpx値や%値を指定しましょう。
  • 高さの代わりにmax-heightをアニメーションさせると、アコーディオンメニューなど「開閉」の演出にも応用できます。
  • 頻繁なレイアウト再計算が発生するため、パフォーマンスを重視する場面ではtransform: scaleY()の利用も検討するとよいでしょう。
  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要素