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

Question

I try using the animation-delay with negative values. The value should be manipulated with JavaScript to control the animation. The following pen works in all modern browsers, but not in MS Edge. Also not with the corresponding vendor prefixes.

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)"> 

Isn't this supported by MS Edge?

Answer 1

This bug report on MS shows the problem: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7729819/

You cannot change animation related values with an effect in Edge. It seems that Edge adhers to an older draft specification of CSS animation which tells that;

The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect.

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

But you have one chance, if you change the animation-name property to a different value the animation starts anew and you can simultaneously change the other animation properties. This has to be done repeatedly every time you want to change an animation property. You can of course toggle between animations with identical keyframes definitions but only different names.

Answer 2

Great, i rebuilt the pen and toggle the animation when using the MS Edge. The performance goes down a bit, but MS Edge users don't know it differently anyway. :)

You should make sure that the step is deeper than 1 to get a smoother animation.

Thanks for your help!