在MS Edge中处理负动画延迟值

Question

我尝试使用负值的动画延迟。应使用JavaScript操纵该值以控制动画。以下笔适用于所有现代浏览器，但不适用于MS Edge。也没有相应的供应商前缀。

Codepen Example

function change(val){
  
  var box = document.getElementById('box');
  
  box.style.animationDelay = -val + 's';
}

#box {
  width: 200px;
  height: 200px;
  background-color: red;
  animation-name: effect;
  animation-duration: 1s;
  animation-delay: 0s;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

input {
  margin-top: 10px;
  width: 200px;
}

@-webkit-keyframes effect {
  to {
    background-color: blue;
  }
}
@-moz-keyframes effect {
  to {
    background-color: blue;
  }
}
@-ms-keyframes effect {
  to {
    background-color: blue;
  }
}
@keyframes effect {
  to {
    background-color: blue;
  }
}

<div id="box" class="transitionEffect"></div>
<input type="range" id="range" min="0" max="1" step="0.05" value="0" oninput="change(this.value)">

这不是MS Edge支持的吗？

Answer 1

关于MS的这个错误报告显示了问题：https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7729819/

您无法在Edge中更改具有效果的动画相关值。 Edge似乎更喜欢CSS动画的旧草案规范，它告诉我们;

用于关键帧和动画属性的值在动画开始时被快照。在执行动画期间更改它们无效。

来自https://www.w3.org/TR/2013/WD-css3-animations-20130219/#animations

但是你有一次机会，如果你将animation-name属性更改为不同的值，动画重新开始，你可以同时更改其他动画属性。每次要更改动画属性时都必须重复执行此操作。您当然可以在具有相同关键帧定义但仅有不同名称的动画之间切换。

Answer 2

太棒了，我重建笔并在使用MS Edge时切换动画。性能有所下降，但MS Edge用户无论如何都不会有所不同。 :)

您应确保步长深于1以获得更平滑的动画。

谢谢你的帮助！