CSS3动画暂停/恢复跳跃和WebKit中

跳跃我已经实现动画暂停如下所述： How to pause and resume CSS3 animation using JavaScript?CSS3动画暂停/恢复跳跃和WebKit中

这里是我的旋转元件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（on鼠标移出），旋转动画重置为“原点”。有时候，有时候不会。这发生在webkit（OSX上的Chrome和Safari）中，在FF中正常工作。

我知道animation-play-state是一个实验性功能，但是MDN says it should work fine in webkit。有没有人有任何想法如何实施的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); } 
}

来源

2012-12-14 Benjamin Smith

你试过animation-fill-mode: forwards？这指定在动画结束时，它应该保持其最终样式，而不是恢复到其预先动画状态。

来源

2012-12-14 15:17:42 RachelNabors

没有骰子 - 这个属性没有按解决不了问题，行为没有改变。我尝试了'倒退'和'前进'和'两个' - 仍然没有。谢谢 –

我在Webkit浏览器中也遇到过类似的CSS动画问题。这个问题，在我的情况，是我使用的CSS属性transform，像这样：

@keyframes float { 
    0% { transform: translateY(0px); } 

    50% { transform: translateY(20px); } 

    100% { transform: translateY(0px); } 
}

此暂停/播放动画与animation-play-state属性时造成的毛刺/跳。用top代替transform解决了webkit浏览器中的跳跃问题。

@keyframes float { 
    0% { top: 0px; } 

    50% { top: 20px; } 

    100% { top: 0px; } 
}

来源

2013-04-10 15:11:56 pruett

我正在使用'transform：rotate（）'而不是'translateY';是否有可能让你的答案适应我的情况？ –

我不得不使用CSS基于动画三维旋转木马产品目录在两个方向跳动的同味：悬停。

已经摆脱了像动画填充模式：转发和类似明显的想法，并没有最少的好运，最终解决了它是混合两个位的转换语法与一个微小的持续时间和转换本身作为属性。在过渡追捉变换的状态的过程中，它的更新要被改造的元素保持完好，而且效果似乎符合规格，所以它应该是一个有效的解决方案

transition-duration: 0.2s;transition-property:transform;

来源

2013-09-25 18:50:16 user784509

CSS3动画暂停/恢复跳跃和WebKit中

回答

相关问题