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

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

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

コード例

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        overflow: auto;
        width: 350px;
        background-color: blue;
        color: white;
        border: 1px solid black;
        animation: myanim 3s infinite;
      }
      @keyframes myanim {
        30% {
          min-height: 250px;
        }
      }
    </style>
  </head>
  <body>
    <h1>min-heightの例</h1>
    <div>
      <p>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
        これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
        これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
        これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
        これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
        これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
        これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
      </p>
    </div>
  </body>
</html>

コードのポイント

  • animation: myanim 3s infinite; — アニメーション名「myanim」、再生時間3秒、無限ループを指定しています。
  • @keyframes myanim — アニメーションの進行度30%の時点で min-height: 250px; を適用し、最小の高さが滑らかに変化するようにしています。
  • overflow: auto; — コンテンツが領域からあふれた場合にスクロールバーを表示するため設定しています。

このコードをブラウザで実行すると、青色のボックスの最小の高さが周期的に伸縮するアニメーションを確認できます。

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

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

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

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