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

CSSでmax-height（最大高さ）をアニメーションさせる方法

CSSでは、max-heightプロパティにも@keyframesを使ったアニメーションを適用できます。要素の高さが徐々に変化するエフェクトを作りたい場合に便利です。以下のコードを実行して、実際の動きを確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 350px;
            background-color: orange;
            overflow: auto;
            border: 1px solid black;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            30% {
               max-height: 100px;
            }
         }
      </style>
   </head>
   <body>
      <h1>max-heightのアニメーション例</h1>
      <div>
         <p>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
            これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
            これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
            これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
            これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
            これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
            これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
         </p>
      </div>
   </body>
</html>

コードのポイント解説

このサンプルでは、div要素に対してanimation: myanim 3s infinite;を指定し、「myanim」という名前のアニメーションを3秒間隔で無限に繰り返しています。

@keyframes myanimの中では、アニメーション全体の30%の時点でmax-height: 100px;になるよう定義しています。これにより、要素の最大の高さが時間の経過とともに変化し、滑らかな伸縮アニメーションが実現します。

また、overflow: auto;を指定しているため、コンテンツがmax-heightの制限を超えた場合にはスクロールバーが表示されます。この指定がないと、はみ出したテキストがそのまま表示されてしまい、アニメーションの効果がわかりにくくなるので注意しましょう。

補足：max-heightアニメーションの注意点

heightやmax-heightのアニメーションはレイアウトの再計算を伴うため、transformやopacityのアニメーションに比べてパフォーマンス面で不利になります。特に大きな要素や頻繁なアニメーションでは動作が重くなる可能性があるため、実装時は要素のサイズや使用場面を考慮するとよいでしょう。

  1. CSSでmin-height（最小の高さ）プロパティをアニメーションさせる方法

    CSSで min-height（最小の高さ）プロパティにアニメーションを適用するには、@keyframes ルールと animation プロパティを組み合わせて使用します。以下のサンプルコードでは、div要素に対して3秒間のアニメーションを無限に繰り返すよう設定し、アニメーション進行度が30%の時点で min-height を250pxまで変化させています。コード例<!DOCTYPE html> <html>   <head>     <style>    

  2. CSSでmax-widthプロパティをアニメーションさせる方法

    CSSでは、max-widthプロパティも他のアニメーション対応プロパティと同様に、@keyframesルールとanimationプロパティを組み合わせることで、滑らかなアニメーションを実現できます。 以下の例では、div要素に対して3秒間のアニメーションを適用し、アニメーションの進行度が30%に達した時点でmax-widthが250pxになるように指定しています。 サンプルコード <!DOCTYPE html> <html>    <head>       <style>   &nb