我已经实现了动画暂停,如下所述:如何使用 JavaScript 暂停和恢复 CSS3 动画? https://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using-javascript
这是我的旋转元素的 CSS:
.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;
}
我切换一个is-paused
相关元素的类onmouseover
:
.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)中,在 FF 中工作正常。
I know animation-play-state
是一个实验性功能,但是MDN 说它在 webkit 中应该可以正常工作 https://developer.mozilla.org/en-US/docs/CSS/animation-play-state。有谁对如何实现 webkit 浏览器有任何想法吗?
UPDATE:这是 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); }
}
你有没有尝试过animation-fill-mode: forwards
?这指定在动画结束时,它应该保持其最终样式,而不是恢复到动画前状态。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)