如何通过JavaScript操作CSS @keyframes ?

Question

有一个简单的CSS动画:

<div id="saved-test">
<style type="text/css">
#saved-test {
width:  40px; height:  40px;
background:  red;
position: fixed;
top:  0; left: 0;
animation-name: move-to-bottom;
animation-duration: 5s;
z-index:  1000;
}

@keyframes move-to-bottom {
to {
left:  400px;
top:  500px;
}
}
</style>

这是可行的，它可以很好地移动。我遇到的问题是，我想将该元素的目的地设置为不同的。它将是"移动的"。到底部导航栏，这意味着目标左侧/顶部位置将根据屏幕大小而变化。

是否可以通过Javascript修改keyframe中的left和top值，以便它进入我动态设置的设置位置?

Answer 1

你可以完全用JavaScript编写关键帧，如下所示，这使你能够使用动态值。

Element接口的animate()方法是一个快捷方法，它创建一个新的动画，应用到元素上，然后播放动画。它返回创建的动画对象实例。更多和MDN的文档。

document.getElementById("saved-test").animate(
[
// étapes/keyframes
{
left: "0px",
top: "0px"
},
{
left: 400 + "px", // you can set it dynamically
top: 500 +"px" // you can set it dynamically
}
],
{
duration: 5000,
iterations: Infinity
}
);

#saved-test {
width: 40px;
height: 40px;
background: red;
position: fixed;
z-index: 1000;
}

<div id="saved-test">