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

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

CSSでは、line-heightプロパティにも@keyframesとanimationプロパティを組み合わせることで、滑らかなアニメーション効果を適用できます。行間（テキストの行の高さ）が徐々に変化する動きは、テキストの強調表示や視覚的な演出など、さまざまな場面で活用できます。

実装例

以下は、line-heightプロパティにアニメーションを実装するサンプルコードです。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            animation: mymove 3s infinite;
            line-height: 20px;
         }
         @keyframes mymove {
            70% {
               line-height: 50px;
            }
         }
      </style>
   </head>
   <body>
      <p>これはデモ用のテキストです！これはデモ用のテキストです！
      これはデモ用のテキストです！これはデモ用のテキストです！
      これはデモ用のテキストです！これはデモ用のテキストです！
      これはデモ用のテキストです！これはデモ用のテキストです！</p>
   </body>
</html>

コードの解説

  • animation: mymove 3s infinite; … mymoveという名前のアニメーションを3秒かけて無限に繰り返すよう指定しています。
  • @keyframes mymove … アニメーションの途中経過を定義します。この例では、全体の70%の時点でline-heightが50pxになるように設定しています。
  • line-height: 20px; … 初期状態の行間を20pxに設定しています。

このコードを実行すると、段落内のテキストの行間が20pxから50pxへと滑らかに広がり、その後また元に戻るアニメーションが繰り返し再生されます。@keyframes内のパーセンテージや値を変更することで、アニメーションの速度や変化の度合いを自由に調整できます。

  1. CSSのpadding-topプロパティでアニメーションを実行する方法

    CSSでは、padding-topプロパティもアニメーションの対象にすることができます。@keyframesルールの中でpadding-topの値を変化させることで、要素の上側の余白が滑らかに動くアニメーションを作成できます。実装のポイントアニメーションさせたい要素にanimationプロパティを設定します。@keyframes内で、進行度（例：30%）の時点でのpadding-topの値を指定します。アニメーション時間や繰り返し回数は自由に調整可能です。サンプルコード以下のコードでは、3秒間のアニメーションを無限に繰り返し、途中（30%の時点）でpadding-topが60pxまで変化します

  2. CSSのtext-justifyプロパティとは？使い方と各値の解説

    text-justifyプロパティとは CSSのtext-justifyプロパティは、text-alignプロパティにjustify(両端揃え)が指定されている場合に、テキストをどのような方法で均等割り付けするかを制御するためのプロパティです。単語間のスペースで調整するか、文字間のスペースで調整するかなどを細かく指定できます。 構文 text-justify: auto | inter-word | inter-character | none | initial | inherit; プロパティの値一覧 auto — ブラウザが最適な揃え方を自動的に判断します(既定値)。 inter-