CSS 动画网格布局

Bramus

在 CSS 网格中，grid-template-columns 和 grid-template-rows 属性分别用于定义网格列和行的线名称和轨道大小。支持对这些属性进行插值，可让网格布局在不同状态之间平滑过渡，而不是在动画或过渡的中途突然切换。

Browser Support

• 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 动画也是如此，浏览器会在关键帧之间进行值插值。

注意： 使用自定义属性时，请使用 @property 指明其类型。这样，浏览器就知道如何从一个值过渡到另一个值。

为 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 值的动画。