search

web-animations / web-animations-js

JavaScript implementation of the Web Animations API
http://web-animations.github.io
Apache License 2.0
3.77k stars 408 forks source link

Is Delay in keyframes not supported? #224

Open ousachev opened 4 years ago

ousachev commented 4 years ago

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

SalazarJosh commented 3 years ago

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.