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