Value Interpolation in CSS #
In CSS you can smoothly transition properties from one value to the other using the
transition: opacity ease-in-out 0.25s;
The rendering engine will automatically detect the type of the targeted property’s value, and use that information to smoothly transition to the new value.
1? That’s a numerical interpolation.
black? Fade between the source and target colors.
width? Interpolate numerically, converting units along the way if needed.
The same applies to CSS animations, where the browser will do value interpolation between keyframes.
Thanks to our contributors at Microsoft, Chrome–as of version 107–is able to interpolate
Grid layouts can smoothly transition between states, instead of snapping at the halfway point of an animation or transition.
In the demo below a grid is showing several avatars. To conserve space, the avatars are laid out on top of each other by limiting the width of each column using
grid-template-columns. On hover, each column is given more space.
grid-template-columns: repeat(4, 2em);
transition: all ease-in-out 0.25s;
grid-template-columns: repeat(4, 4em);
transition property in place, the grid smoothly interpolates between values.
The effect also applies to animations that change the