CSS动画：暂停和改变位置

Question

我正在为 div 的 left / top 属性设置动画以将其移动到屏幕上。 （为简洁起见，去掉了前缀）

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%; }
}  

单击 div 后，我添加了一个 CSS 类，它暂停 CSS 动画，并且应该使 div 在屏幕中居中。 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-top/margin-left 的控制覆盖了您可能尝试为点击侦听器设置的任何此类值。如果您删除动画并重新添加它，它会重置为零。因此，您需要一种不与您正在制作动画的值交互的 div 居中方法。

要解决此问题，请从absolute 或fixed 定位切换到flex 定位，并通过justify-content 和align-items 居中。如下图所示嵌套您的 div，以使居中正常工作。并将animation-fill-mode 设置为forwards，以便动画记住它在暂停之间的最后位置。

演示：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');
    }
  });

});

文档：

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