jquery - CSS动画:暂停和更改位置

我正在为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/

最佳答案

发生这种情况是因为您仍然有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;
}