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

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

対応ブラウザ

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

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

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

#target:hover {
 
opacity: 1;
}

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

次に例を示します。

  • opacity0 から 1 に移行する。これは数値補間です。
  • background-colorwhite から black に移行する。ソースカラーとターゲット カラーをフェードします。
  • width を移行しますか? 数値的に補間し、必要に応じて単位を変換します。

CSS アニメーションでも同様です。ブラウザはキーフレーム間で値の補間を行います。

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