CSS アニメーション グリッド レイアウト

Bramus

CSS グリッドでは、grid-template-columns プロパティと grid-template-rows プロパティを使用して、グリッドの列と行のライン名とトラックサイズをそれぞれ定義できます。これらのプロパティの補間をサポートすることで、グリッド レイアウトはアニメーションや遷移の途中でスナップするのではなく、状態間をスムーズに遷移できます。

Browser Support

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

CSS での値の補間

CSS では、transition プロパティを使用して、プロパティをある値から別の値にスムーズに移行できます。

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

レンダリング エンジンは、ターゲット プロパティの値のタイプを自動的に検出し、その情報を使用して新しい値にスムーズに移行します。

次に例を示します。

  • opacity を 0 から 1 へ移行しますか？ これは数値補間です。
  • background-color を white から black へ移行しますか？ ソースカラーとターゲット カラーの間でフェードします。
  • width を移行しますか？ 数値を補間し、必要に応じて単位を変換します。

同じことが CSS アニメーションにも当てはまります。ブラウザはキーフレーム間で値の補間を行います。

grid-template-columns と grid-template-rows をアニメーション化する

グリッド レイアウトでは、アニメーションや遷移の途中でスナップするのではなく、状態間をスムーズに遷移することもできます。

次のデモでは、グリッドに複数のアバターが表示されています。スペースを節約するため、grid-template-columns を使用して各列の幅を制限することで、アバターが重なるように配置されています。ホバーすると、各列のスペースが広がります。

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

transition プロパティを設定すると、グリッドは値の間を滑らかに補間します。

この効果は、grid-template-columns 値または grid-template-rows 値を変更するアニメーションにも適用されます。