我已经按照这里描述的实现了动画暂停功能:
如何使用JavaScript暂停和恢复CSS3动画?
这是旋转元素的CSS代码:
当我使用JS(在 onmouseout 事件中)移除这个类时,旋转动画会重置到“原点”。有时会发生这种情况,有时不会。这种情况发生在webkit(OSX 上的 Chrome 和 Safari),在Firefox中可以正常工作。
我知道
.is-rotating{
-webkit-animation: circle 55s linear infinite;
-moz-animation: circle 55s linear infinite;
-ms-animation: circle 55s linear infinite;
animation: circle 55s linear infinite;
}
当我使用 onmouseover
时,我会为相关元素切换一个 is-paused
类:
.is-paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
当我使用JS(在 onmouseout 事件中)移除这个类时,旋转动画会重置到“原点”。有时会发生这种情况,有时不会。这种情况发生在webkit(OSX 上的 Chrome 和 Safari),在Firefox中可以正常工作。
我知道
animation-play-state
是一个实验性的特性,但是MDN表示它应该在webkit中正常工作。有人对如何在webkit浏览器中实现此功能有什么想法吗?
更新: 这里还有剩余的CSS:@-webkit-keyframes circle {
from { -webkit-transform:rotate(0deg); }
to { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes inner-circle {
from { -webkit-transform:rotate(0deg); }
to { -webkit-transform:rotate(-360deg); }
}
@-moz-keyframes circle {
from { -moz-transform:rotate(0deg); }
to { -moz-transform:rotate(360deg); }
}
@-moz-keyframes inner-circle {
from { -moz-transform:rotate(0deg); }
to { -moz-transform:rotate(-360deg); }
}
@-ms-keyframes circle {
from { -ms-transform:rotate(0deg); }
to { -ms-transform:rotate(360deg); }
}
@-ms-keyframes inner-circle {
from { -ms-transform:rotate(0deg); }
to { -ms-transform:rotate(-360deg); }
}
@keyframes circle {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
@keyframes inner-circle {
from { transform:rotate(0deg); }
to { transform:rotate(-360deg); }
}
transform:rotate()
而不是translateY
;你的答案能否适应我的情况? - Benjamin Smith