CSS動畫：暫停和更改位置

Question

我在動畫div的左/頂部屬性以在屏幕上移動它。 （前綴爲簡潔，刪除）

animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate; 

@keyframes moveX { 
    from { left: 0; } to { left: 100%; } 
} 

@keyframes moveY { 
    from { top: 0; } to { top: 100%; } 
} 

在點擊我添加了一個CSS類暫停CSS動畫，應集中在屏幕的股利股利。 CSS：

/* Pause Animation */ 
    -webkit-animation-play-state: paused; 
    -moz-animation-play-state: paused; 
    -o-animation-play-state: paused; 
    animation-play-state: paused; 

    /* Position Center */ 
    top:50%; 
    left:50%; 
    margin: -50px 0 0 -50px; 

左/頂部值沒有被應用。

如何暫停並保持動畫當前狀態，更改div的位置，然後返回到動畫。

減少測試用例的位置： http://test.addedlovely.com/pmr/

Answer 1

這是因爲DIV的發生，你仍然有

-webkit-animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate; 
-moz-animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate; 
-o-animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate; 
animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate; 
} 

設置屬性：這應該做的伎倆

-webkit-animation: none; 
-moz-animation: none; 
-o-animation: none; 
animation: none; 
} 

Answer 2

的問題似乎是動畫對您的top/left和的控制/margin-left將覆蓋您可能嘗試爲點擊偵聽器設置的任何此類值。如果您刪除動畫並重新添加它，它會重置爲零。相反，您需要一種方法來集中您的div，而不會與您正在動畫的值進行交互。

要解決這個問題，從absolute或fixed定位通過justify-content和align-items切換到flex定位和中心。如下圖所示嵌套您的div，以便居中正常工作。並將animation-fill-mode設置爲forwards，以便動畫記憶它在暫停之間的最後位置。

DEMO：http://jsbin.com/secag/1/

HTML：

<div id="container"> 
    <div id="parent"> 
    <div id="div" class="animated running"</div> 
    </div> 
</div> 

CSS：

#container { 
    position: absolute; 
    top: 0; bottom: 0; 
    left: 0; right: 0; 
} 

#parent { 
    height: 100%; 
    display: -webkit-flex; 
    display: flex; 
} 

.center-children { 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-align-items: center; 
    align-items: center; 
} 

#div { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
} 

.animated { 
    -webkit-animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate; 
    -webkit-animation-fill-mode: forwards 
} 

@-webkit-keyframes moveX { 
    from { left: 0; } to { left: 100%; } 
} 

@-webkit-keyframes moveY { 
    from { top: 0; } to { top: 100%; } 
} 

.paused { 
    -webkit-animation-play-state: paused; 
} 

.running { 
    -webkit-animation-play-state: running; 
    position: absolute; 
} 

JS：

document.addEventListener('DOMContentLoaded', function(){ 

    var div = document.getElementById('div'); 

    div.addEventListener('click', function(){ 
    if(this.classList.contains('paused')) { 
     this.parentElement.classList.remove('center-children'); 
     this.classList.remove('paused'); 
     this.classList.add('running'); 
    } else { 
     this.classList.remove('running'); 
     this.classList.add('paused'); 
     this.parentElement.classList.add('center-children'); 
    } 
    }); 

}); 

DOCS：

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode