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