Say I have something like

notificationEl.current.animate([{ opacity: 0 }, { marginTop: marginTop }], {
   duration: 1000,
});

but I want I don't want it to start immediately. How can I specify a delay? I've tried looking up all the options that are available as the second argument, but I can't find it on MDN.

Additionally, is there a way to specify %s or is Element.animate() reserved for simple from/to?

I need to use Element.getBoundingClientRect() to move elements the right amount of space since the size of the elements varies. As such, I can't just use keyframes in my CSS. I've never tried to animate something inline, so any help/pointers would be appreciated.

I've already tried to use "delay" as an option, but got an error saying it's invalid. Same goes for timing-function. I want to use ease-out but not sure how to do that using Element.animate().

Is there a better way of achieving a variable margin-top for an animation than using Element.animate() or is that the right choice for what I'm going for?

Thanks.