如何通过Javascript动态添加关键帧？

所以，我想通过关键帧使用变量来设置Html元素的动画，但我找不到通过DOM实现的方法

HTML代码

<div class="pawn" id="pawn1"></div>

在这里，我希望能够使用变量更改

bottom

属性

---

谢谢。

您可以使用CSS变量来完成。基本思路如下

const board=document.querySelector（“.board”）；
const root=document.documentElement；
常数更新=（evt，y）=>{
常数件=evt.target；
工件。类列表。删除（“活动”）；
工件.style.bottom=y+“px”；
};
board.addEventListener（“单击”，evt=>{
const clicked=evt.target.closest（“.piece”）；
如果（！单击）返回；
const startY=Number（单击.dataset.y）；
常数=startY-20；
root.style.setProperty（'-bottom-0'，startY+“px”）；
root.style.setProperty（'-bottom-100'，endY+“px”）；
单击。removeEventListener（'animationend'，update）；
单击.addEventListener（'animationend'，evt=>update（evt，endY））；
单击.dataset.y=endY；
单击.classList.add（“活动”）；
});
：根目录{
--底部-0:0px；
--底部-100:-0px；
}
div{
位置：相对位置；
}
跨度件{
位置：相对位置；
}
span.piece.active{
动画持续时间：1.5s；
动画名称：mov_pawn；
}
@关键帧mov_pawn{
0% {
底部：var（--bottom-0）；
颜色：蓝色；
}
100% {
底部：var（--bottom-100）；
颜色：黑色；
}
}

X
X
X
X
检查：
@keyframes mov_pawn_up {
    0% {
        bottom: 0%;
    }
    100% {
        bottom: 700%;
    }
}