Question

我有一个简单的CSS动画，如下所示：

 @-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

看到行为

Answer 1

尝试使用“-webkit-transform：translate”代替top，bottom，left，right属性。

Answer 2

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

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

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

CSS3动画不能一直播放

2 个答案: