如何使用javascript移动@keyframes步骤？

Question

我创建了一张带有CSS-Animation @keyframes的图片Carouselle：

@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-animations具有更高的特异性值，然后定期设置属性值。

所以我也试过了：

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（）

     

window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器调用指定的函数以在下次重绘之前更新动画 。

     

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