Grid animation
Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
animation | 107 | 107 | 66 | 16 | 107 | 16 |
animation Animation of tracks | 107 | 107 | 66 | 16 | 107 | 16 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
transition: grid-template-columns 0.3s ease;
}
.grid.collapsed {
grid-template-columns: 0fr 1fr;
}Live demo
Use cases
-
Using Grid animation
Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.