如何更改元素上的關鍵幀位置

<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有權訪問關鍵幀對象嗎？

來源

2016-09-20 zloctb

運行這並使用Inspect Element顯示所有屬性，然後在那裏編輯實現。它肯定會工作。當你刷新頁面，然後使用「Ctrl + Shift + R」刷新同時按下所有按鈕。 –

在關鍵幀動畫中設置的屬性在處於活動狀態時優先於其他所有內容。由於figure具有影響其left屬性的無限運行動畫，因此直接更改屬性將不會有明顯效果。

一旦您選擇具體的left值，您想要發生什麼動畫？

如果你想跳轉到指定位置，並停在那裏，只需通過設置也animation: none;
如果你想「暫停」在給定位置禁用動畫的動畫並在以後繼續，你會需要使用Javascript更明確地控制動畫。啓用CSS動畫時，始終從0％開始（如果反向運行，則爲100％）;他們在被禁用後不能從中間的任意點「恢復」。

來源

2016-09-21 07:14:51 Telic

如何更改元素上的關鍵幀位置

回答

相關問題