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

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

CSSのflex-growプロパティは、フレックスコンテナ内の余白スペースを各アイテムにどのように分配するかを指定するプロパティです。実は、このflex-growは@keyframesを使ったアニメーションの対象にすることができ、要素が伸び縮みする動きのあるレイアウトを簡単に実現できます。

flex-growアニメーションの基本

アニメーション化の手順は以下のとおりです。

  • 親要素にdisplay: flex;を指定してフレックスコンテナを作成します。
  • @keyframesルールの中で、特定のキーフレーム（例：30%）の時点でflex-growの値を変更します。
  • animationプロパティでアニメーション名・ duration ・繰り返し回数などを設定します。

サンプルコード

以下のコードでは、5つのボックスを持つフレックスコンテナに対して、4秒間のアニメーションを無限に繰り返すように設定しています。アニメーションの進行が30%に達した時点で、各ボックスのflex-growが「3」まで拡大されます。

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: red;
      align-content: space-between;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      margin: 5px;
    }
    div {
      animation: myanim 4s infinite;
    }
    @-webkit-keyframes myanim {
      30% {
        flex-grow: 3;
      }
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div style="flex-grow: 1">A1</div>
    <div style="flex-grow: 1">A2</div>
    <div style="flex-grow: 20">A3</div>
    <div style="flex-grow: 1">A4</div>
    <div style="flex-grow: 1">A5</div>
  </div>
</body>
</html>

コードのポイント解説

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

.mycontainerクラスにdisplay: flex;を指定することで、子要素（A1〜A5）が横一列に並ぶフレックスレイアウトになります。背景色を赤にしているため、ボックスが伸縮する様子が視覚的にわかりやすくなっています。

2. 各アイテムの初期値

A1〜A5のうち、A3だけインラインスタイルでflex-grow: 20が設定されています。そのため初期状態ではA3が他のボックスより大きく表示され、残りの4つはflex-grow: 1で均等な幅になります。

3. キーフレームによる伸縮アニメーション

@keyframes myanimでは、アニメーション全体の30%の時点でflex-grow: 3を指定しています。これにより、すべてのボックスが一度縮小方向へ変化し、また元のサイズへ戻るという滑らかな伸縮動作が4秒ごとに繰り返されます。

なお、-webkit-のベンダープレフィックス付きの記述は古いWebKit系ブラウザ向けのもので、現在の主要ブラウザでは標準の@keyframesだけで動作します。ただし、古いブラウザへの互換性を考慮する場合は両方を併記しておくと安心です。

応用のヒント

flex-growのアニメーションは、ホバー時にカード型メニューを拡大させたり、タブ選択時にアクティブな項目を目立たせたりといったUI演出にも活用できます。animation-timing-functionにease-in-outなどを組み合わせると、より自然で洗練された動きになりますので、ぜひ試してみてください。

  1. CSSのorderプロパティをアニメーションさせる方法

    CSSのorderプロパティは、Flexboxレイアウトにおけるフレックスアイテムの表示順序を制御するためのプロパティです。整数値で指定し、値が小さいほど先頭に近い位置に配置されます。そして、@keyframesと組み合わせることで、このorderプロパティの値をアニメーションさせ、アイテムの並び順が入れ替わる様子を動的に表現することができます。 アニメーション実装のポイント 親要素に display: flex; を指定してフレックスコンテナを作成する @keyframes の中で order の値を変更するキーフレームを定義する animation プロパティでアニメーション名・再生時間

  2. CSSでz-indexプロパティをアニメーションさせる方法

    CSSでは、z-indexプロパティもアニメーションの対象にできます。@keyframesルールの中でz-indexの値を段階的に変化させることで、要素の重なり順序を時間の経過とともに動的に変更できます。以下のコードを実行して、その動作を確認してみましょう。サンプルコード<!DOCTYPE html> <html>    <head>       <style>