CSS グリッドでは、grid-template-columns プロパティと grid-template-rows プロパティを使用して、グリッドの列と行のサイズをそれぞれ線名を定義し、サイズを追跡できます。これらのプロパティの補間をサポートすると、グリッド レイアウトでアニメーションや遷移の中間点でスナップするのではなく、状態間をスムーズに遷移できます。
対応ブラウザ
- 107
- 107
- 66
- 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 アニメーションについても同様です。CSS アニメーションでは、ブラウザがキーフレーム間で値の補間を行います。
grid-template-columns と grid-template-rows の補間
Microsoft のコントリビューターのおかげで、Chrome のバージョン 107 では 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 値を変更するアニメーションにも適用されます。