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

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

CSSのflex-shrinkプロパティは、フレックスコンテナ内のアイテムが縮小する比率を指定できるプロパティです。このプロパティにCSSアニメーションを組み合わせることで、要素の縮み方を滑らかに変化させることができます。

flex-shrinkプロパティとは

flex-shrinkは、フレックスボックスレイアウトにおいて、コンテナのスペースが不足したときに各アイテムをどれだけ縮小させるかを決める値です。デフォルト値は「1」で、数値が大きいほど強く縮小されます。「0」を指定すると、そのアイテムはまったく縮小しなくなります。

実装例

以下のコードでは、@keyframesを使ってflex-shrinkの値をアニメーションさせています。4秒間のアニメーションが無限に繰り返され、70%の時点でflex-shrinkが「1」に変化します。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 150px;
            font-size: 30px;
            width: 100px;
            margin: 5px;
         }
         div {
            animation: myanim 4s infinite;
         }
         @-webkit-keyframes myanim {
            70% {
               flex-shrink: 1;
            }
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div style = "flex-shrink: 0">Q4</div>
         <div>Q5</div>
         <div>Q6</div>
         <div>Q7</div>
         <div>Q8</div>
         <div>Q9</div>
      </div>
   </body>
</html>

コードの解説

1. フレックスコンテナの設定

.mycontainerクラスにdisplay: flex;を指定することで、子要素が横一列に並ぶフレックスレイアウトになります。背景色にはオレンジ色を設定しています。

2. 子要素（フレックスアイテム）のスタイル

各アイテムは幅100px、白背景、中央揃えのテキストという共通スタイルを持っています。なお、Q4の要素だけインラインスタイルでflex-shrink: 0が指定されているため、他の要素と異なる挙動を見せます。

3. アニメーションの定義

@keyframes myanimでは、アニメーション全体の70%時点でflex-shrinkを「1」に変更しています。animation: myanim 4s infinite;により、このアニメーションが4秒ごとに無限ループします。

ブラウザ対応について

古いWebKit系ブラウザ向けに-webkit-プレフィックス付きのキーフレームも定義していますが、現在の主要ブラウザ（Chrome、Firefox、Safari、Edge）では標準の@keyframesだけで十分に動作します。新しいプロジェクトでは、プレフィックスなしの記述でも問題ありません。

このようにflex-shrinkをアニメーション化すると、画面幅の変化に応じて要素が柔軟に伸縮する、動的なレイアウト表現が可能になります。

  1. CSS子セレクター（>）とは？使い方とサンプルコードで解説

    CSSの子セレクターは、特定の親要素の直下にある子要素だけを選択するために使用されるセレクターです。親要素と子要素の間に「>」（大なり記号）を挟んで指定することで、直接の子要素のみがスタイルの適用対象となり、孫要素以降の階層には影響しません。構文CSS子セレクターの基本構文は以下の通りです。element > element { /* 宣言 */ }使用例1次の例では、article要素の直下にあるdiv要素、およびdiv要素の直下にあるp要素に対してスタイルを適用しています。<!DOCTYPE html> <html> <head> <s

  2. CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

    CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro