css - CSS动画中的计算值与指定值

Question

根据MDN：

如果from/0%或to/100%未指定，浏览器将使用所有属性的计算值开始或结束动画。

在以下示例中，height属性计算值为0px：

div#parent {
  width: 100px;
  height: 100px;
  outline: 1px solid teal;
}

div#child {
  background: tan;
  animation: lengthen 2s infinite;
}

@keyframes lengthen {
  to {
    height: 100px;
  }
}

<div id="parent">
  <div id="child"></div>
</div>

但是浏览器使用height: auto;，这是元素指定的值，这就是动画不起作用的原因。

这是规范上的类似内容：

如果未指定关键帧0%或from关键帧，则用户代理0%使用正在动画的属性的计算值构造关键帧。如果未指定关键帧100%或to关键帧，则用户代理100%使用正在动画的属性的计算值构造关键帧。

但是如果浏览器实际添加from {height: 0px;}了计算值，那么动画就会正常工作。在上述文档中使用指定值而不是计算值不是更准确吗？

Answer 1

MDN 是对的，height 的初始值实际上是 auto，浏览器显示的“计算”值是特殊关键字和初始值转换为的值。

Answer 2

MDN 是对的，因为 height:auto 的计算值是 height:auto。0px 是使用的值。

根据 MDN 再次：

但是，对于某些属性（百分比与可能需要布局确定的内容相关的属性，例如宽度、右边距、文本缩进和顶部），百分比指定值会转换为百分比计算值。