jquery - CSS 动画 : Pause and change position

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