CSS如何确定隐式动画关键帧？JS API动画场景解析

现代浏览器对隐式关键帧的取值逻辑 #

从Chrome 84及以上版本开始，Web Animations API支持隐式关键帧补全，核心规则如下：

• 当关键帧列表中某个关键帧缺少部分动画属性时，浏览器会自动补全这些属性的隐式值，取值为动画开始前元素对应属性的计算样式值（即元素当前实际生效的样式）。
• 如果是只提供单个关键帧的from/to模式（比如只传[{ opacity: 0 }]），浏览器会自动补全另一方向的关键帧：补to关键帧时用元素当前计算值，补from关键帧时同理。

比如你提供的原代码中，第二个关键帧只写了transform: ''（等价于transform: none），opacity未定义，浏览器就会取元素当前的opacity计算值（通常为1）作为该关键帧的opacity值，补全后效果等同于显式写出opacity: 1。

常见属性的隐式值说明 #

针对你提到的opacity、transform、offset，具体规则如下：

• opacity：初始计算值为1，若动画前元素未设置该属性，隐式值就是1；如果元素已有自定义opacity（比如0.5），则隐式值为该自定义值。
• transform：初始计算值为none（对应空字符串的效果），若动画前元素未设置transform，隐式值为none；如果元素已有transform样式（比如scale(1.2)），则隐式值为该样式的计算结果。
• offset（关键帧偏移量）：未指定时，浏览器会按关键帧顺序自动分配：第一个关键帧默认offset: 0，最后一个默认offset: 1，中间的关键帧会均匀分配偏移值（比如3个无offset的关键帧，偏移量依次为0、0.5、1）。

获取隐式关键帧值的方法 #

1. 提前获取元素初始计算样式 #

通过getComputedStyle可以拿到动画开始前元素的所有计算样式，这就是浏览器会用的隐式值：

const computedStyle = getComputedStyle(el);
// 获取opacity的隐式值
const implicitOpacity = computedStyle.opacity;
// 获取transform的隐式值
const implicitTransform = computedStyle.transform;

2. 从已创建的动画实例中获取补全后的关键帧 #

动画创建后，可以通过动画实例的effect.getKeyframes()方法，获取浏览器补全后的完整关键帧列表，里面会包含所有补全的隐式属性值：

const animation = animate(el, [{
  transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
  opacity: 0
}, {
  transform: '',
}], {
  duration: 225 * speed,
  easing: deceleratedEasing
});

// 获取补全后的完整关键帧
const fullKeyframes = animation.effect.getKeyframes();
console.log(fullKeyframes);
// 输出的每个关键帧都会包含补全后的opacity、transform等属性

旧版本浏览器兼容提示 #

在Chrome 69及更早版本中，不支持隐式关键帧补全，必须显式写出每个关键帧的所有动画属性，否则会抛出异常，就像你提供的修改后代码那样，需要把opacity和transform都显式定义。

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