javascript - 如何更改元素上的关键帧位置

Question

<div id="slider">
    <figure>
        <img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/a.png" />
        <img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/b.png" />
        <img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/c.png" />
        <img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/d.png" />
        <img src="http://www.codelamp.co.uk/css-slideshow/images/blanks/e.png" />
    </figure>
</div>
<style>
    @keyframes slidy {
    0% { left: 0%; }
    25% { left: -100%; }
    50% { left: -200%; }
    75% { left: -300%; }
    100% { left: -400%; }
    }
    body { margin: 0; } 
    div#slider { overflow: hidden; }
    div#slider figure img { width: 20%; float: left; }
    div#slider figure { 
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 30s slidy infinite; 
    }
    .css-slider-mask{
    width:300px;
    height:300px;
    }
</style>

如何改变当前图像的位置？我试过了

document.querySelector('figure').getBoundingClientRect()
ClientRect {top: 0, right: 930.609375, bottom: 0, left: -569.390625, width: 1500…} 

但是当我改变的时候

document.querySelector('figure').style.position.left = '-110px'

观点没有变化!为什么 ？

我想改变动画的位置。Javascript 可以访问关键帧对象吗？

Answer 1

在关键帧动画中设置的属性在它们处于事件状态时优先于其他所有内容。由于 figure 有一个无限运行的动画会影响其 left 属性，因此直接更改该属性不会产生可见的效果。

当您选择一个特定的 left 值后，您希望动画发生什么？

• 如果您想跳转到给定位置并停在那里，只需通过设置 animation: none;
来禁用动画
• 如果您想在给定位置“暂停”动画并稍后继续播放，则需要使用 Javascript 更明确地控制动画。 CSS 动画在激活时总是从 0% 开始(如果反向运行则从 100% 开始)；他们不能在被禁用后从中间的任意点“恢复”。