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

CSSでcolumn-ruleプロパティをアニメーション化する方法

CSSでは、column-ruleプロパティにもアニメーション効果を適用できます。column-ruleは、マルチカラムレイアウトにおけるカラム（段組み）間の区切り線のスタイル（太さ・種類・色）を指定するプロパティです。このプロパティを@keyframesと組み合わせることで、区切り線が変化していくアニメーションを実現できます。

実装例

以下のコードは、4段組みのテキストブロックに対してcolumn-ruleプロパティをアニメーションさせる例です。3秒間のアニメーションが無限に繰り返され、アニメーションの進行に合わせて区切り線やボックスシャドウが変化します。

<!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-rule: 10px inset red;
      }
   }
</style>
</head>
<body>
<h2>column-ruleプロパティによるアニメーション</h2>
<div>これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。
   これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。
   これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。
   これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。
   これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。
   これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。
   これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。
   これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。
   これはデモ用テキストです。
</div>
</body>
</html>

コードのポイント解説

このサンプルで押さえておきたいポイントを以下にまとめます。

  • column-count: 4;
    <div>要素内のテキストを4つのカラムに分割しています。
  • @keyframes myanim
    アニメーションの各段階でのスタイルを定義します。ここでは「20%」の時点でbottom、box-shadow、そしてcolumn-ruleの値を変更しています。
  • column-rule: 10px inset red;
    カラム間の区切り線として、「太さ10px・inset（くぼみ）スタイル・赤色」の罫線を表示します。アニメーションによってこの区切り線の見た目が変化します。
  • animation: myanim 3s infinite;
    定義したキーフレーム「myanim」を3秒かけて再生し、無限に繰り返す設定です。

ブラウザでこのHTMLファイルを開くと、ボックス全体が上下に動きながら、オレンジ色の影とともにカラム間の区切り線が変化していく様子を確認できます。実際の開発では、column-rule-colorやcolumn-rule-widthなど個別のサブプロパティだけをアニメーション対象にすることも可能ですので、用途に応じて調整してみてください。

  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