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

CSSのword-spacingプロパティをアニメーション化する方法

CSSでは、word-spacingプロパティにもアニメーションを適用できます。word-spacingは、単語と単語の間隔（スペースの幅）を調整するプロパティです。この値を@keyframesで変化させることで、テキストの間隔が滑らかに広がったり狭まったりするアニメーションを実現できます。

以下のコードを実行すると、3秒周期で単語間隔が変化するアニメーションを確認できます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            border: 2px solid blue;
            background: orange;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            50% {
               word-spacing: 30px;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS word-spacingプロパティ</h1>
      <div>
         This is demo text! This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text! This is demo text!
      </div>
   </body>
</html>

コードの解説

1. アニメーションの適用

div要素に対してanimation: myanim 3s infinite;を指定しています。これは「myanim」という名前のキーフレームを、3秒かけて無限に繰り返すという意味です。

2. @keyframesによる中間状態の定義

@keyframes myanim内の50%でword-spacing: 30px;を指定しています。これにより、アニメーションの中間地点（1.5秒時点）で単語間隔が30pxまで広がり、その後また元の間隔へと戻る動きになります。

3. 動作のポイント

  • word-spacingは数値（px、emなど）で指定することで、ブラウザが補間処理を行い滑らかなアニメーションになります。
  • 初期値はnormalですが、アニメーションさせたい場合は明示的に0などの数値を指定しておくと動作が安定します。
  • 主要なモダンブラウザ（Chrome、Firefox、Safari、Edge）でword-spacingのアニメーションがサポートされています。

このように、word-spacingを活用すると、テキストの余白が呼吸するように変化するユニークな演出を簡単に実装できます。

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

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

  2. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini