Can I animate grid-column?
It doesn't appear that you can, in the sense you mean, animate grid-column
, based on the documentation over at Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
Grid column's animation type is discrete
, meaning there's no "tweening" or interpolation.
That's a bummer.
There are some hacky (or in other cases, JS-heavy) workarounds, but YMMV according to how much effort you want to put into it. See this thread, for example:
animating a smooth css grid-column change
Using CSS transitions in CSS Grid Layout
According to the spec, transitions should work on grid-template-columns
and grid-template-rows
.
7.2. Explicit Track Sizing: the
grid-template-rows
and
grid-template-columns
propertiesAnimatable: as a simple list of length, percentage, or calc, provided
the only differences are the values of the length, percentage, or calc
components in the list
So, if my interpretation is correct, as long as the only changes are to the values of the properties, with no changes to the structure of the rule, transitions should work. But they don't.
UPDATE
This does work but is so far only implemented in Firefox. Follow here
for other browser updates.
https://codepen.io/matuzo/post/animating-css-grid-layout-properties
~ a contribution in the comments by @bcbrian
Here's a test I created:
grid-container { display: inline-grid; grid-template-columns: 100px 20vw 200px; grid-template-rows: repeat(2, 100px); background-color: black; height: 230px; transition: 2s; /* non-essential */ grid-gap: 10px; padding: 10px; box-sizing: border-box;}
grid-container:hover { grid-template-columns: 50px 10vw 100px; grid-template-rows: repeat(2, 50px); background-color: red; height: 130px; transition: 2s;}
grid-item { background-color: lightgreen;}
<grid-container> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item></grid-container>
Grid Element expand animations using CSS
Here's an example seemingly doing what you want, coded from scratch, without any JavaScript. I used flexbox instead of grid, but it can be achieved with grid as well. I used :hover
as a trigger:
body { padding: 15px; background-color: #999; margin: 0;}
.grid>*:hover, .grid>*>*:hover { flex-grow: 3;}
.grid>*>*:hover { box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12); z-index: 1; opacity: 1; font-size: 5rem;}.grid:hover>*:not(:hover) { flex-grow: 0; max-height: 0; overflow: hidden;}.grid>*,.grid>*>* { transition: all .6s cubic-bezier(0.5, 0, 0.3, 1);}
.grid { flex-direction: column; min-height: calc(100vh - 30px); box-sizing: border-box;}
.grid,.grid>* { display: flex; max-height: 100%;}
.grid>* { flex-direction: row; margin: 0;}
.grid>*,.grid>*>* { flex-grow: 1;}
.grid>*>* { margin: 0; z-index: 0; position: relative; background-color: #fff; outline: 1px solid #ddd; opacity: .95; display: flex; align-items: center; justify-content: center; line-height: 0; font-size: 3rem; overflow: hidden;}
<div class="grid"> <div> <div>1</div> <div>2</div> </div> <div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> <div> <div>7</div> <div>8</div> <div>9</div> </div></div>
Grid-template-columns animation
grid-template-columns
could be animated, but unfortunately - as of today - there is no support in any of the known browsers, yet. However, you can animate (grid-)gap
, (grid-)row-gap
or (grid-)column-gap
in all browsers, except Safari.
bootstrap 4 animate column width change
Since Bootstrap 4 uses flexbox, CSS transition animations don't work unless you use set a numeric flex-grow
or flex-shrink
on the columns.
.col-8 {
flex-grow: 1;
transition: all 400ms ease;
}
.col-0 {
width: 0;
flex-shrink: 1;
transition: all 400ms ease;
}
Demo: http://www.codeply.com/go/4Un0Q8CvkQ
To animate the grid columns as they change the media query breakpoints (instead of toggle classes via jQuery), you can simply use a CSS transition on the grid columns.
.row [class*='col-'] {
transition: all 0.5s ease-in-out;
}
Demo: https://www.codeply.com/go/IHUZcvNjPS
Related Topics
Make CSS Shimmer Effect Work an Already Loaded Image
Modernizr Reporting Laptop as Touch Device in Chrome and Ff
Change Background of Child If Parent :Hover
How to Make a Svg Clippath with a <Path> Responsive
How to Line Up 3 Divs on The Same Row
HTML - Newline Char in Div Content Editable
Default Settings of Unrecognized HTML Elements
Styling Dropdowns (Select) Boxes
Cutting a Triangle Out of Div, But Have It Horizontally Centered
CSS Not Working on Django Password Form Field
Simulating Color Stops in Gradients for Ie
Webgrease Error on Styles.Render Call in _Layout.Cshtml in MVC4
What Is the Scope of the * CSS Hack
Twitter Bootstrap Custom Carousel Indicators
How to Get Floating Divs Inside Fixed-Width Div to Continue Horizontally