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

CSSのcolumn-gapプロパティをアニメーションさせる方法

CSSのcolumn-gapプロパティは、段組み（マルチカラム）レイアウトにおける列と列の間隔を指定するプロパティです。このプロパティはアニメーションに対応しているため、@keyframesを使用することで、列間隔を時間の経過とともに滑らかに変化させることができます。

以下のコードでは、animationプロパティと@keyframesを組み合わせて、column-gapの値をアニメーションさせています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 600px;
      height: 300px;
      background: white;
      border: 10px solid red;
      animation: myanim 3s infinite;
      bottom: 30px;
      position: absolute;
      column-count: 4;
    }
    @keyframes myanim {
      20% {
        bottom: 100px;
        box-shadow: 30px 45px 70px orange;
        column-gap: 70px;
      }
    }
  </style>
</head>
<body>
  <h2>column-gapプロパティのアニメーション</h2>
  <div>
    これはデモ用のテキストです。これはデモ用のテキストです。
    これはデモ用のテキストです。これはデモ用のテキストです。
    これはデモ用のテキストです。これはデモ用のテキストです。
    これはデモ用のテキストです。これはデモ用のテキストです。
    これはデモ用のテキストです。これはデモ用のテキストです。
    これはデモ用のテキストです。これはデモ用のテキストです。
    これはデモ用のテキストです。これはデモ用のテキストです。
    これはデモ用のテキストです。これはデモ用のテキストです。
    これはデモ用のテキストです。
  </div>
</body>
</html>

コードのポイント解説

  • column-count: 4; … 要素内のテキストを4段組みで表示します。
  • @keyframes myanim … アニメーションの進行が20%の時点で column-gap: 70px; を適用するキーフレームを定義しています。
  • animation: myanim 3s infinite; … 定義したキーフレームを3秒かけて再生し、無限に繰り返します。
  • あわせて bottom や box-shadow も変化させており、要素が浮き上がりながら影が広がる演出になっています。

ブラウザでこのHTMLファイルを開くと、列の間隔が初期値から70pxへと滑らかに広がり、その後また元に戻るアニメーションが繰り返し表示されます。

transitionを使った補足テクニック

マウスホバー時など特定の操作に反応して列間隔を変えたい場合は、transitionプロパティを使う方法も便利です。

div {
  column-count: 3;
  column-gap: 20px;
  transition: column-gap 0.5s ease;
}
div:hover {
  column-gap: 60px;
}

このように記述すると、要素にカーソルを合わせたときだけ列間隔が0.5秒かけて広がります。@keyframesによる自動再生と使い分けることで、より表現豊かな段組みレイアウトを実現できます。

  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