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

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

CSSでは、段組みの列数を指定するcolumn-countプロパティにもアニメーションを適用できます。@keyframesルールと組み合わせることで、要素の段組み数が時間の経過とともに変化する動的な演出が可能になります。

column-countプロパティとは

column-countは、テキストなどを指定した数の段（カラム）に分割して表示するためのCSSマルチカラムレイアウト関連のプロパティです。新聞や雑誌のような段組みデザインをWebページ上で手軽に実現できます。この値を@keyframes内で変化させることで、段組み数が滑らかに切り替わるアニメーションを作成できます。

実装例

以下のコードでは、3秒間のアニメーションを無限に繰り返すサンプルを紹介します。アニメーションの進行度20%の時点で、column-countが4段に変化し、同時にボックスの位置や影も変化します。

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

コードのポイント

  • animation： myanim 3s infiniteと指定することで、「myanim」という名前のアニメーションが3秒かけて無限に繰り返されます。
  • @keyframes： 進行度20%の時点でのスタイルを定義しており、そこでbottom、box-shadow、column-countの3つのプロパティが同時に変化します。
  • column-count: 4： アニメーション中にテキストが4段組みに変化し、視覚的に段組み数の遷移を確認できます。

このようにcolumn-countはアニメーション可能なプロパティであるため、段組みレイアウトを活用したインタラクティブな表現にも応用できます。

  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