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

CSSアニメーションでcolumn-widthプロパティを変化させる方法

CSSでcolumn-widthプロパティにアニメーションを実装するには、@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;
            column-width: 200px;
         }
         @keyframes myanim {
            20% {
               bottom: 100px;
               box-shadow: 30px 45px 70px orange;
               column-rule-color: black;
               column-width: 150px;
            }
         }
      </style>
   </head>
   <body>
      <h2>Performing Animation on column width property</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%の時点でのスタイルを定義しています。ここでcolumn-widthを200pxから150pxへ変化させ、段組みの列幅が滑らかに縮小されます。
  • column-count: 4; — テキストを4段に分割して表示します。column-widthとのバランスで実際の段数は調整されます。
  • column-rule — 各段の間にオレンジ色の区切り線を描画し、アニメーション中にはcolumn-rule-colorが黒に変化します。
  • box-shadow / bottom — 列幅だけでなく、要素の位置や影も同時にアニメーションさせており、複数プロパティを1つのキーフレームで扱えることを示しています。

このように@keyframes内でcolumn-widthの値を指定するだけで、段組みレイアウトの列幅に対してもCSSアニメーションを適用できます。ブラウザによっては段組み関連プロパティの補間に対応していない場合があるため、主要なブラウザでの動作確認をおすすめします。

  1. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini

  2. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。 構文 CSS text-indentプロパティの基本構文は以下のとおりです。 Selector { text-indent: /*value*/ } 指定できる主な値は次のとおりです。 <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。 <percentage>：包含ブロックの幅に対する割合（%）で指定します。 負