我在动画div的左/顶部属性以在屏幕上移动它。 (前缀为简洁,删除)CSS动画:暂停和更改位置
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/
添加动画没有失去div的位置,所以当类被删除它跳回到起点。 – addedlovely 2014-08-27 21:53:46