Grid animation
CSS Gridのトラックサイズをスムーズにアニメーション・トランジションさせる機能です。パネルの展開・折りたたみやレイアウトの動的な切り替えを、滑らかなアニメーションで実現できます。すべての主要ブラウザで広くサポートされています。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.grid-template-columns.animation | 107 | 107 | 66 | 16 | 107 | 16 |
| CSS プロパティ | ||||||
animation トラックのアニメーション | 107 | 107 | 66 | 16 | 107 | 16 |
基本構文
CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
transition: grid-template-columns 0.3s ease;
}
.grid.collapsed {
grid-template-columns: 0fr 1fr;
}ライブデモ
実務での使いどころ
-
サイドバーの展開・折りたたみ
Gridトラックサイズをアニメーションさせて、サイドバーをスムーズに展開・折りたたむUIを実現します。
注意点
- 0frへのアニメーションでコンテンツが溢れる場合があるため、overflow: hiddenと組み合わせて使用してください。
アクセシビリティ
- prefers-reduced-motionメディアクエリを使用して、モーション設定を尊重するアニメーションの無効化を実装してください。