CSS 工作组 几周前竖起大拇指. super-duper 概念建议是我们可以动画或过渡，比方说， display: block 至 display: none.
这有点让人费解，因为设置 display: none 在一个元素上取消动画。 添加它会重新启动动画。 根据规范：
设置
display财产none将终止应用于该元素及其后代的任何正在运行的动画。 如果元素的显示为无，则将显示更新为除none将启动应用到元素的所有动画animation-name属性，以及应用于后代的所有动画display以外none.
这种循环行为使这个概念在到达时似乎已经死了。 但 if @keyframes 支持任何 display 折扣值 以外 none, 那么就没有办法 none 取消或重新开始。 这给出了非none 价值观优先，允许 none 只有在动画或过渡完成后才做它的事情。
米里亚姆的 嘟 （这就是我们真正的称呼，对吧？）解释了它是如何工作的：
我们并没有完全插值，比如说， block 和 none, 但允许 block 保持完好无损，直到事情停止移动并且可以安全应用 none. 这些是关键字，因此两者之间没有明确的值。 因此，这仍然是一个离散的动画。 动画完成后，我们将在两个值之间切换。
@keyframes slideaway {
from { display: block; }
to { transform: translateY(40px); opacity: 0;}
}
.hide {
animation: slideaway 200ms;
display: none;
}这是一个有用的示例，因为它显示了第一帧如何将元素设置为 display: block, 优先于基础 display: none 作为非none 价值。 这允许动画运行并完成而无需 none 在此过程中取消或重置它，因为它只会解决 after 动画。
这是 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 重置或取消其中任何一个？ 我敢肯定，从无限动画、反转方向到各种其他问题，一切都会及时得到解决。
但多么酷的第一步！
