仅定义0%状态的CSS scaleX关键帧动画为何仍能正常运行？

CSS @keyframes 缺失关键帧的运行规则 #

这是CSS动画规范明确定义的默认补全行为，具体规则如下：

• 当@keyframes中没有显式声明*0%（也可写为from）关键帧*时，浏览器会自动使用元素应用动画前的原有属性值作为起始帧状态
• 当@keyframes中没有显式声明*100%（也可写为to）关键帧*时，浏览器会自动使用元素不应用动画时的最终属性值作为结束帧状态
• 如果整个@keyframes规则内没有定义任何合法的关键帧，动画会直接失效不执行

你给出的示例中仅定义了grow动画的0%状态为transform: scaleX(0)，未定义100%状态，浏览器就会自动补全100%状态为div元素的默认transform值transform: scaleX(1)，和你写全0%、100%的示例效果完全一致，所以可以正常运行。

你测试用的代码如下：

div { 
  width: 100px; 
  height: 100px; 
  background: red; 
  position: relative; 
  animation: grow 5s; 
} 
@keyframes grow { 
  0% { transform: scaleX(0); }
}

<body> 
  <h1>The @keyframes Rule</h1> 
  <div></div> 
</body>

内容的提问来源于stack exchange，提问作者gmoniava