如何使用JavaScript的animate()方法实现CSS自定义变量的动画效果？

直接用单一目标值调用animate()无法为CSS自定义变量生成有效动画——浏览器需要明确的起始值、结束值，以及可识别的变量类型（如颜色、带单位数值）来完成插值计算。以下是正确的实现方案：

核心规则 #

• 必须通过关键帧数组定义动画的起始与结束状态，而非单一目标对象
• 提前为元素设置CSS变量的初始值（或在关键帧中明确起始值）
• 确保元素的CSS规则中实际使用了该自定义变量，否则动画不会有视觉反馈

颜色类型变量示例 #

以控制背景色的--foo-bar变量为例，实现从红色到蓝色的动画：

// 获取目标DOM元素
const foo = document.querySelector('.target-element');

// 设置初始值（也可在CSS中预先定义）
foo.style.setProperty('--foo-bar', 'red');

// 执行动画
foo.animate(
  [
    { '--foo-bar': 'red' }, // 起始帧
    { '--foo-bar': 'blue' }  // 结束帧
  ],
  { duration: 200, fill: 'forwards' }
);

对应的CSS需关联该变量：

.target-element {
  background-color: var(--foo-bar);
}

数值类型变量示例 #

如果是控制尺寸的--size变量，动画逻辑类似：

.box {
  width: var(--size);
  height: var(--size);
  background: #ccc;
}

const box = document.querySelector('.box');
box.style.setProperty('--size', '10px');

box.animate(
  [
    { '--size': '10px' },
    { '--size': '30px' }
  ],
  {
    duration: 500,
    fill: 'forwards',
    easing: 'ease-in-out'
  }
);

注意事项 #

• 无单位数值变量（如--opacity: 0.5）同样需要在关键帧中明确起始和结束值
• 避免混用不同类型的变量值（比如从颜色直接跳到数值），否则浏览器无法完成插值

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