Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Grid animation

CSS Gridのトラックサイズをスムーズにアニメーション・トランジションさせる機能です。パネルの展開・折りたたみやレイアウトの動的な切り替えを、滑らかなアニメーションで実現できます。すべての主要ブラウザで広くサポートされています。

Gridレイアウトアニメーション

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
animation
107
107
66
16
107
16
animation

トラックのアニメーション
107
107
66
16
107
16
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: grid-template-columns 0.3s ease;
}
.grid.collapsed {
  grid-template-columns: 0fr 1fr;
}

ライブデモ

カラム幅アニメ

CSS の カラム幅アニメ パターンです。

プレビュー全画面表示

行の開閉

CSS の 行の開閉 パターンです。

プレビュー全画面表示

ホバーで変化

CSS の ホバーで変化 パターンです。

プレビュー全画面表示

実務での使いどころ

  • サイドバーの展開・折りたたみ

    Gridトラックサイズをアニメーションさせて、サイドバーをスムーズに展開・折りたたむUIを実現します。

注意点

  • 0frへのアニメーションでコンテンツが溢れる場合があるため、overflow: hiddenと組み合わせて使用してください。

アクセシビリティ

  • prefers-reduced-motionメディアクエリを使用して、モーション設定を尊重するアニメーションの無効化を実装してください。

参考リンク