所以，您想动画化 display 属性

CSS 工作组 几周前对此表示赞同。 这个超级概念性的提案是，我们可以动画化或过渡，例如，从 display: block 到 display: none。

这是一个有点令人费解的事情，因为在元素上设置 display: none 会取消动画。 添加它会重新启动动画。 按照规范

将 display 属性设置为 none 将终止应用于元素及其后代的任何正在运行的动画。 如果元素的 display 为 none，将 display 更新为除 none 以外的值将启动应用于元素的所有动画，这些动画由 animation-name 属性应用，以及应用于具有 display （除 none 以外）的后代的所有动画。

这种循环行为使得这个概念似乎一开始就死了。 但如果 @keyframes 支持除 none 以外的任何 display 值，那么 none 就没有办法取消或重新启动任何东西。 这使非 none 值优先，允许 none 仅在动画或过渡完成后执行其操作。

Miriam 的 toot（我们确实这样称呼这些东西，对吧？）解释了这可能如何工作

我们并不是在 block 和 none 之间进行插值，而是允许 block 保持完整，直到事物停止移动并且安全地应用 none 为止。 这些是关键字，因此两者之间没有明确的值。 因此，这仍然是离散动画。 我们在动画完成后在两个值之间切换。

这是来自 讨论 的 Robert Flack 的示例

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

这个例子很有帮助，因为它展示了第一帧如何将元素设置为 display: block，它作为非 none 值优先于底层的 display: none。 这允许动画运行并完成，而 none 在过程中不会取消或重置它，因为它只在动画之后解析。

这是 Miriam 在 Mastodon 上提到的示例

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

这次我们处理的是过渡。 底层的 display 值在任何事情发生之前都设置为 none，因此它完全不在文档流中。 现在，如果我们要在悬停时转换它，也许像这样

.hide:hover {
  display: block;
  opacity: 1;
}

…那么元素理论上应该在 200ms 内淡入。 同样，我们是在 display 值之间切换，但 block 优先，因此过渡不会在最前面被取消，而是在 opacity 完成过渡之后实际应用。

至少我的想法是这样。 我很高兴有非常聪明的人在思考这些问题，因为我想象有很多事情需要理清。 例如，如果多个动画分配给一个元素，none 会重置或取消其中任何一个吗？ 我相信，无限动画、反向方向以及各种其他事情都将在将来得到解决。

但这是一个超级酷的第一步！