为何无法修改JS animate()作用于元素的属性？动画后样式无法更改

这是预期行为吗？ #

是的，这是Web Animations API的预期设计行为。当设置fill: 'both'或fill: 'forwards'时，动画结束后会将最终状态保留在浏览器的动画优先级层中，而非写入元素的内联样式。

动画结束后不会写入内联style #

动画结束后，最终样式不会被应用到元素的style属性上。动画状态由浏览器动画引擎单独维护，和元素自身的内联样式、CSS规则属于不同层级——且动画层的优先级更高。

为什么无法修改属性？ #

这是CSS样式优先级规则导致的：Web Animations API产生的动画样式优先级高于内联样式（element.style）、ID选择器、类选择器等所有常规样式来源。所以哪怕通过开发者工具或JS修改元素的style属性，都会被动画层保留的状态覆盖，看起来就像修改没生效。

保留动画样式并可修改的方案 #

方案1：手动同步最终样式（你找到的临时方案） #

使用fill: 'none'让动画结束后不保留状态，监听finish事件手动将最终样式应用到元素的style属性：

let anim = square.animate(animation, {duration: 2000, fill: 'none'})
anim.addEventListener('finish', () => {
  square.style.transform = 'translateY(100px)' // 对应动画的最终状态
})

这个方法的本质是把动画状态转移到元素的内联样式上，摆脱动画层的优先级控制。

方案2：提取动画最终状态并释放动画层 #

如果已经用了fill: 'both'，可以在动画结束后提取最终关键帧样式，应用到元素上再取消动画，既保留动画效果，又能让后续修改生效：

let square = document.querySelector('.circle')

square.addEventListener('click', () => {
    square.style.transform = 'translateY(50px)'
})

let animation = [{transform: 'translateY(100px)'}]
let anim = square.animate(animation, {duration: 2000, fill: 'both'})

anim.addEventListener('finish', () => {
    // 获取动画的最后一帧样式
    const finalFrame = anim.effect.getKeyframes().at(-1)
    // 将样式应用到元素内联style
    Object.assign(square.style, finalFrame)
    // 取消动画，释放动画层的优先级控制
    anim.cancel()
})

示例代码（动画结束后点击失效的场景） #

HTML

<div class='circle'></div>

CSS

.circle {
  width: 100px;
  height: 100px;
  background-color: #c965a6;
  border-radius: 50%;
}

JavaScript

let square = document.querySelector('.circle')

square.addEventListener('click', () => {
    square.style.transform = 'translateY(50px)'
})

let animation = [
    {transform: 'translateY(100px)'}
]

square.animate(animation, {duration: 2000, fill: 'both'})

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