--animate-delay for each element?

[jack-fdrv]

Describe The Bug

From the docs, we can set --animate-duration: 0.7s; per each element, but let me know if we able to do the same for --animate-delay: 10s; right now it only works for :root

Steps To Reproduce

Try to set for you single animated element this

--animate-duration: 0.7s;
--animate-delay: 10s;

Expected Behavior

Animation will start in 10 seconds.

Screenshots

Desktop

• iOs
• Chrome

Smartphone

No response

Additional Context

No response

[DaywisonSilva]

Hi @jack-fdrv , I can fix it.

[thelabuzov]

👋 Hey @jack-fdrv, in Animate.css documentation delayed animation doesn't work. I checked source code animate.css version 4.1.1 (the latest version) and noticed that (--animate-delay) variable no longer exists. Instead, try using (--animation-delay: 10s) and (-webkit-animation-delay: 10s) this way you'll get delayed animation working for most browsers. If this answer helped you, please mark it as answer and I'll be very grateful 😀

[eltonmesquita]

Sorry @thelabuzov, but this info is not correct, we do have and use that variable and the documentation is correct.

I'll check if it's working as it should as might there be a CSS custom property quirk that we might have missed and is blocking the variable from being overridden.

[MihaelIsaev]

@eltonmesquita I can confirm that --animate-delay and --animate-repeat doesn't work for the elements, only --animate-duration works. Moreover classes like animate__delay-2, animate__repeat-2 doesn't work also. Seems like a serious bug in v4.1.1.

[Kedarnath-Rothe]

Pease assign this issue to me