CSS3动画不播放始终

2010-11-13 65 views 2 likes

我有一个简单的CSS动画，看起来像下面这样：CSS3动画不播放始终

@-webkit-keyframes 'move-domo' { 
    0% { bottom: 0px; left: 24px; } 
    5% { bottom: 5px; } 
    10% { bottom: 0px; } 
    15% { bottom: 5px; } 
    20% { bottom: 0px; } 
    25% { bottom: 5px; } 
    30% { bottom: 0px; } 
    35% { bottom: 5px; } 
    40% { bottom: 0px; } 
    45% { bottom: 5px; } 
    50% { bottom: 0px; left: 300px; } 
    55% { bottom: 5px; } 
    60% { bottom: 0px; } 
    65% { bottom: 5px; } 
    70% { bottom: 0px; } 
    75% { bottom: 5px; } 
    80% { bottom: 0px; } 
    85% { bottom: 5px; } 
    90% { bottom: 0px; } 
    95% { bottom: 5px; } 
    100% { bottom: 0px; left: 24px; } 
}

在Chrome中，它的工作原理我希望它，但在Safari浏览器，它不打球的方式我期望的方式 - 首先播放所有“底部”动画，然后在最后冲过“左侧”动画。

您可以在http://kylehayes.me

来源

2010-11-13 Kyle Hayes

删除html5标记为html5！= css3，它可能会混淆其他人。 – 2010-11-15 17:38:55

谢谢，好点。 – 2010-11-17 00:47:18

回答

Safari是正确的行为。当动画关键帧未指定值时，它应该使用基础对象上的值。 Chrome插入丢失的关键帧值。

该动画正确地将图像保持在其原始位置，然后在15秒内将其移动到300px（您在动画中指定的总动画的50％ - 我查看了您的源）。然后将其移回到下一个关键帧的原始位置。

您可以通过在每个关键帧中指定左侧的适当中间值，或者将水平动画放在垂直动画的包装div中来解决此问题。

来源

2010-11-14 17:39:50

啊，这是有道理的。谢谢。我有一种感觉，Safari会是正确的。关于包装div的好建议。谢谢！ – 2010-11-15 15:55:14

尝试看到的行为使用“-webkit-变换：翻译”，而不是顶部，底部，左，右属性。

来源

2010-11-13 22:12:55

这对上述提供了什么优势？ – 2010-11-14 00:00:28

不必手动指定每个插值。 – Dykam 2010-11-15 19:11:44

CSS3动画不播放始终

回答

相关问题