如何使用 javascript 通过@keyframes 步骤？

Question

我用 CSS-Animation @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-buttons，它们可以将图像轮播拉到它的 left:value;

我试图重新定位 carouselle's left value 的任何方法都失败了。

这对我不起作用：

element.style.left = '300px';

我听说 css-动画具有比定期设置属性值更高的特异性值。

所以我也试过这个：

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

在我的 @keyframes carouselle 步骤中，我可以通过什么方式将轮播位置带到特定步骤？

Answer 1

您可以从阅读这篇很棒的文章开始，它将为您提供一些想法。
https://css-tricks.com/css-animation-tricks/

之后你也可以做其中一件事情。

---

Events

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

---

animationstart

# The animationstart event is fired when the animation starts for the first time.
var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

---

animationiteration

# The animationiteration event is fired at the start of every new animation
# iteration, i.e. every iteration except the first.
anim.addEventListener("animationiteration", AnimationListener, false);

---

animationend

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

---

使用 requestAnimationFrame 来控制您的元素的位置，当您尝试为它设置动画时。该函数将在 之前被调用 它将在屏幕上重新绘制

window.requestAnimationFrame()

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.

The method takes as an argument a callback to be invoked before the repaint.