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

Question

根据MDN：

  

如果未指定from / 0%或to / 100%，则浏览器会使用所有属性的计算值启动或完成动画。

在以下示例中，height属性computed value为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;，这是元素specified value，这就是动画不起作用的原因。

spec上有类似的内容：

  

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

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

Answer 1

MDN是正确的，因为height：auto的计算值是height：auto。 0px是使用的值。

再次MDN：

  

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

Answer 2

MDN是正确的，高度is actually auto的初始值，＆＃34;计算＆＃34;浏览器显示的值是特殊关键字和初始值转换为的值。