如何在Javascript中更改关键帧的CSS属性？

我在

@关键帧

范围内有两个选择器

from

和

to

，如下所示：

@keyframes pie {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 77px;
    }
}

我想通过JavaScript将

更改为

的属性，但似乎将

样式

属性赋予了

。pie

并没有按照我的要求工作。它直接创建

.pie

的属性，而不是

到

选择器

到目前为止，我就是这样做的：

类计时器{
构造器（elem）{
this.elem=document.querySelector（elem）；
这个。改变（）；
}
更改（）{
this.elem.style.strokedashcoffset=10+'px'；
}
}
让getTimer=newtimer（'.pie'）
svg.timer{
宽度：40px；
高度：40px；
变换：旋转（-180度）旋转（-90度）；
}
圈{
笔划阵列：77px；
行程偏移：0px；
笔画宽度：2px；
笔画：棕色；
动画：pie 10s线性无限向前；
}
@关键帧饼图{
从{
笔划偏移：0；
}
到{
行程偏移：77px；
}
}

最简单的方法是使用：


类计时器{
构造器（elem）{
this.elem=document.querySelector（elem）；
这个。改变（）；
}
更改（）{
this.elem.style.setProperty（'--dashoffset'，10+'px'）；
}
}
让getTimer=newtimer（'.pie'）
svg.timer{
宽度：40px；
高度：40px；
变换：旋转（-180度）旋转（-90度）；
}
圈{
笔划阵列：77px；
行程偏移：0px；
笔画宽度：2px；
笔画：棕色；
动画：pie 10s线性无限向前；
}
@关键帧饼图{
从{
笔划偏移：0；
}
到{
行程偏移：77px；
行程dashoffset:var（--dashoffset）；
}
}
.pie{--dashoffset:77px；}

您考虑过使用css变量吗？也许这会有所帮助：@AdamOrlov我认为您给出的链接与我的案例不相关。我的主要问题是给出或更改
@keyframes选择器
中的属性。链接中的OP不使用CSS中的
@keyframes
或任何选择器。@好极了，我在CSS中将属性设置为
stroke dashoffset:var（LGdashOffset）
，并尝试更改JS中的代码，如下所示：
document.documentElement.style.LGdashOffset=101+'px'但是
到
选择器的属性仍然没有改变。
var（LGdashOffset）
不是在css中使用css变量的方式。。。而且
document.documentElement.style.LGdashOffset=101+'px'
不是您更改它们的方式！！我是这样学的