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

CSSのcolumnsプロパティをアニメーションで変更する方法

CSSでcolumnsプロパティ（段組み設定）にアニメーションを適用するには、@keyframesルールでアニメーションを定義し、要素側にanimationプロパティを指定します。次のコードを実行すると、段の幅・本数や段間罫線の色が時間の経過とともに滑らかに変化する様子を確認できます。

実装例

<!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;
               columns: 70px 6;
            }
         }
      </style>
   </head>
   <body>
      <h2>段組み罫線の色（column-rule-color）へのアニメーション</h2>
      <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! This is demo text!
         This is demo text! This is demo text! This is demo text!
         This is demo text!
      </div>
   </body>
</html>

コードのポイント

  • animation: myanim 3s infinite; … 「myanim」という名前のキーフレームを3秒かけて無限に繰り返し再生します。
  • @keyframes myanim { 20% { ... } } … アニメーションの進行率が20%に達した時点で、各プロパティの値を切り替えます。
  • columns: 70px 6; … 各段の最小幅を70px、段数を6段へと変化させます。
  • column-rule-color: black; … 段と段の間にある罫線の色をオレンジから黒へ変化させます。
  • box-shadow / bottom … 同時にボックスの影と位置も変化させることで、動きに立体感を持たせています。

このように、columnsやcolumn-rule-colorはアニメーション可能なプロパティです。@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