CSS 动画网格布局

在 CSS 网格中,您可以使用 grid-template-columnsgrid-template-rows 属性分别定义线条名称和网格列和行的轨迹大小。支持对这些属性进行插值后,网格布局可以在状态之间平滑过渡,而不是在动画或过渡的中间点卡顿。

浏览器支持

  • Chrome:107.
  • Edge:107。
  • Firefox:66.
  • Safari:16.

CSS 中的值插值

在 CSS 中,您可以使用 transition 属性将属性从一个值平滑过渡到另一个值。

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

渲染引擎会自动检测目标属性值的类型,并使用该信息平滑过渡到新值。

例如:

  • opacity0 转换为 1? 这是数值插值。
  • background-colorwhite 转换为 black? 在源色和目标色之间进行淡化处理。
  • 要转换 width 吗? 以数字方式插值,并根据需要转换单位。

同样,CSS 动画也是如此,浏览器会在关键帧之间进行值插值。

grid-template-columnsgrid-template-rows 添加动画效果

网格布局还可以在状态之间顺畅过渡,而不是在动画或过渡的中间点贴靠。

在下面的演示中,一个网格显示了多个头像。为了节省空间,系统使用 grid-template-columns 限制每列的宽度,以便将头像叠加排列。悬停时,每列都会获得更多空间。

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

添加 transition 属性后,网格会在值之间进行平滑插值。

此效果也适用于更改 grid-template-columnsgrid-template-rows 值的动画。