如何使用javascript完成@keyframes步骤？

我已经创建了一个带有

CSS动画@keyframes

的图像旋转木马：

@keyframes carouselle {
    0% { left: 0; }
    16% { left: 0; }
    33% { left: -350px; }
    49% { left: -350px; }
    66% { left: -700px; }
    84% { left: -700px; }
    100% {  left: 0; }
}

我已经创建了3个

img按钮

，它们假设将图像旋转木马拉到其

左侧：值

无论我尝试以何种方式重新定位

转盘的左值

都失败了

这对我不起作用：

element.style.left = '300px';

element.style.left = '300px !important';

我听说css动画具有更高的特殊性值，然后定期使用值设置属性

所以我也尝试了这个：

element.style.left = '300px';

element.style.left = '300px !important';

---

在我的

@keyframes carouselle

步骤中，如何将旋转木马位置移到特定步骤？

您可以从阅读这篇伟大的文章开始，这篇文章将为您提供一些想法。

之后，你们也可以做这些事情中的一件

---

事件

动画发生时，将触发三种类型的事件：

---

animationstart

---

动画迭代

---

动画结束

---

尝试设置元素动画时，请使用

requestAnimationFrame

控制元素的位置。该函数将在屏幕上重新绘制之前被调用

window.requestAnimationFrame（）

window.requestAnimationFrame（）

方法告诉浏览器您希望执行动画，并请求浏览器在下次重新绘制之前调用指定函数来更新动画

该方法将在重新绘制之前调用的回调作为参数

 # The animationend event is fired when the animation ends.
 anim.addEventListener("animationend", AnimationListener, false);