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％）;在他们被禁用后，他们无法从中间的任意点“恢复”。

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

1 个答案: