web-animations/web-animations-js

Is Delay in keyframes not supported?

ousachev opened this issue · 1 comments

I have Safari 12.1.2 my function animate not working,if i use delay in keyframes. For example:

document
.querySelector(".main__wrapper")
.animate(
[
{ filter: "blur(20px)", delay: 200 },
{ filter: "blur(15px)", delay: 400 },
{ filter: "blur(0px)" },
],
{
easing: "linear",
duration: 1000,
fill: "forwards",
}
);
And please talk to me,how i can to use duration in keyframes,it's very important for my work!
In Firefox and Chrome all works without problem!

With polyfill i have this problem in Safari -
image

I believe the delay is part of the timing properties. You have it on the keyframe objects.

What you're searching for is offset. Check out this example to learn more about offset.