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

【问题标题】：Computed value vs. specified value in CSS animationsCSS动画中的计算值与指定值
【发布时间】：2017-06-13 08:23:41
【问题描述】：

根据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;}，也就是计算出来的值，那么动画就可以正常工作了。上述文档中使用specified值而不是computed值不是更准确吗？

【问题讨论】：

标签： css css-animations specifications computed-style

【解决方案1】：

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

再次根据MDN：

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

【讨论】：

【解决方案2】：

MDN是正确的，高度is actually auto的初始值，浏览器显示的“计算”值是特殊关键字和初始值转换成的值。

【讨论】：

"浏览器显示的'计算'值是特殊关键字和初始值转换为的值。"但是当auto和0px有不同的含义和不同的效果时，他们为什么要这样做呢？即使这样说得通，在文档中使用“指定值”不是更直接吗？
CSS标准使用指定值>计算值（渲染前计算）>使用值（渲染时计算）。浏览器中的 «computed» 选项卡显示的是 Used 值，而不是 CSS 文档中的 «computed value»。