Question

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

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，以使动画更流畅。

感谢您的帮助！

在MS Edge中操纵负动画延迟值

2 个答案: