Safari中的CSS动画bug

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (147)

我有一个带有延迟的CSS动画,并在延迟期间暂停它。在Firefox和Chrome上,“Hello”没有移动。然而,在Safari上,动画跳转到最后一个帧。为什么,怎么修复?

function test() {
  var timeout = 1000;
  setTimeout(function() {
    document.getElementById('animation').style.animationPlayState = 'paused';
  }, timeout);
}

document.addEventListener("DOMContentLoaded", test);
#animation {
  animation: test 2s linear 2s;
}

@keyframes test {
  to {
    transform: translateY(100px);
  }
}
<div id="animation">
  Hello (this text should not move)
</div>

如果我删除2s延迟,将持续时间设置为4s,并添加一个带有Transform:None的关键帧,我可以使这个简单的示例工作。然而,我的实际案例有多个动画,它们与延迟同步。

提问于
用户回答回答于

这不是问题的答案。但是,如果删除动画延迟,则暂停并重新启动动画就像它应该那样工作。看起来动画延迟是导致问题的原因。也许而不是依靠CSS来处理延迟,用JavaScript编程控制动画延迟。

请参阅下面的暂停和运行动画

function test() {
  var timeout = 1000;
  setTimeout(function() {
    document.getElementById('animation').style.animationPlayState ='paused';
    document.getElementById('animation').style.webkitAnimationPlayState ='paused';
  }, timeout);
  setTimeout(function() {
    document.getElementById('animation').style.animationPlayState='running';
    document.getElementById('animation').style.webkitAnimationPlayState ='running';
  }, timeout * 2);
}

document.addEventListener("DOMContentLoaded", test);

#animation {
    -webkit-animation: test 2s linear;
        animation: test 2s linear;
}

@-webkit-keyframes test {
  to {
    -webkit-transform: translateY(100px);
        transform: translateY(100px);
  }
}

@keyframes test {
  to {
    -webkit-transform: translateY(100px);
        transform: translateY(100px);
  }
}

<div id="animation">
  Hello (this text should not move)
</div>
用户回答回答于

当超时设置为小于动画延迟的值时,Safari的行为只是有问题。所以,一个解决方法是将初始状态设置为pausedviaanimation-play-state,然后通过JS控制它,如下所示:

function test() {
  let el = document.getElementById("animation");
  let timeout = 1000;
  
  // Get the delay. No luck with el.style.animationDelay
  let delay =
    window
      .getComputedStyle(el)
      .getPropertyValue("animation-delay")
      .slice(0, -1) * 1000;

  // Only resume and later pause when timeout is greater than animation delay
  if (timeout > delay) {
    el.style.animationPlayState = "running";
    setTimeout(function() {
      el.style.animationPlayState = "paused";
    }, timeout);
  }
}

document.addEventListener("DOMContentLoaded", test);

#animation {
  animation: test 2s linear 3s;
  animation-play-state: paused; /* Pause it right after you set it */
}

@keyframes test {
  to {
    transform: translateY(100px);
  }
}

<div id="animation">
  Hello (this text should not move)
</div>

所属标签

可能回答问题的人

  • EatRice

    16 粉丝0 提问10 回答
  • 学生

    8 粉丝476 提问4 回答
  • 不吃貓的鱼oo

    7 粉丝466 提问3 回答
  • 最爱开车啦

    9 粉丝503 提问3 回答

扫码关注云+社区

领取腾讯云代金券