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

Bramus

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

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