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

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

CSSで段組み（マルチカラム）レイアウトの区切り線の色を指定する column-rule-color プロパティは、@keyframes を使ったCSSアニメーションに対応しています。このプロパティをアニメーション化すると、段と段の間にある罫線の色を滑らかに変化させることができます。

実装例

以下のコードでは、4段組みのテキストブロックに対してアニメーションを適用し、区切り線の色がオレンジから黒へと変化します。あわせて要素の位置やボックスシャドウも変化するように設定しています。

<!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-rule: 10px inset orange;
      column-count: 4;
    }
    @keyframes myanim {
      20% {
        bottom: 100px;
        box-shadow: 30px 45px 70px orange;
        column-rule-color: black;
      }
    }
  </style>
</head>
<body>
  <h2>column-rule-colorプロパティのアニメーション</h2>
  <div>これはデモテキストです。これはデモテキストです。
    これはデモテキストです。これはデモテキストです。
    これはデモテキストです。これはデモテキストです。
    これはデモテキストです。これはデモテキストです。
    これはデモテキストです。これはデモテキストです。
    これはデモテキストです。これはデモテキストです。
    これはデモテキストです。これはデモテキストです。
    これはデモテキストです。これはデモテキストです。
  </div>
</body>
</html>

コードのポイント

  • column-count: 4; — 要素内のテキストを4段に分割します。
  • column-rule: 10px inset orange; — 段の間に幅10pxのオレンジ色の罫線（insetスタイル）を引きます。
  • @keyframes myanim — アニメーションの進行が20%に達した時点で、column-rule-color を black に変更します。
  • animation: myanim 3s infinite; — 作成したアニメーションを3秒かけて無限に繰り返します。

このコードを実行すると、区切り線の色だけでなく、要素の位置（bottom）やボックスシャドウも同時に変化し、動的な演出を確認できます。column-rule-color は色の値を受け取るため、red・#ff0000・rgb(255, 0, 0) のような任意の色指定にも対応します。

  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