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 値を変更するアニメーションにも適用されます。