CSS 动画网格布局

在 CSS 网格中，您可以使用 grid-template-columns 和 grid-template-rows 属性分别定义线条名称，并跟踪网格列和行的大小。支持这些属性的插值可让网格布局在不同状态之间平滑过渡，而不是在动画或过渡的一半处贴靠。

布拉穆斯

浏览器支持

  • 107
  • 107
  • 66
  • 16

CSS 中的值插值

在 CSS 中，您可以使用 transition 属性将属性从一个值平滑地转换为另一个值。

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

#target:hover {
  opacity: 1;
}

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

例如：

  • 是否将 opacity 从 0 转换为 1？ 这属于数字插值。
  • 是否将 background-color 从 white 转换为 black？ 在源颜色和目标颜色之间淡出。
  • 要转换“width”吗？通过数字插值方法，在整个过程中转换单位（如果需要）。

这同样适用于 CSS 动画，其中浏览器将在关键帧之间插入值。

插入 grid-template-columns 和 grid-template-rows

得益于 Microsoft 的贡献者，从 107 版开始，Chrome 能够内插 grid-template-columns 和 grid-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-columns 或 grid-template-rows 值的动画。

全新可互操作系列课程的一部分