The docs mention that users can add --animate-delay to their CSS to delay when a given animation starts. But this CSS variable seems to have no effect.
The expected behavior is that this element would animate after a delay of 5 seconds.
Desktop
OS: macOS Sonoma
Browser: Safari and Chrome and Firefox (that I’ve tested so far)
version: animate.css 4.1.1
Additional Context
I believe that I’ve figured out why this is happening.
In animate.css's base .animate__animated class, the library programmatically connects the animation-duration CSS property to its variable through animation-duration: var(--animate-duration); (which is good!).
.... but then the library’s .animate__animated class doesn’t also connect the animation-delay CSS property to its corresponding --animate-delay variable.
So the upshot is that if you set, say, --animate-delay: 5s; on an element, there ends up being no delay at all.
PS I believe that the --animate-repeat CSS variable is also affected by this since that doesn’t appear to be programmatically connected to its corresponding CSS property within .animate__animated either.
Describe The Bug
The docs mention that users can add
--animate-delay
to their CSS to delay when a given animation starts. But this CSS variable seems to have no effect.Steps To Reproduce
--animate-delay: 5s;
on an element: https://codepen.io/handcoding/pen/dyEZxoJExpected Behavior
The expected behavior is that this element would animate after a delay of 5 seconds.
Desktop
Additional Context
I believe that I’ve figured out why this is happening.
In animate.css's base
.animate__animated
class, the library programmatically connects theanimation-duration
CSS property to its variable throughanimation-duration: var(--animate-duration);
(which is good!)..... but then the library’s
.animate__animated
class doesn’t also connect theanimation-delay
CSS property to its corresponding--animate-delay
variable.So the upshot is that if you set, say,
--animate-delay: 5s;
on an element, there ends up being no delay at all.PS I believe that the
--animate-repeat
CSS variable is also affected by this since that doesn’t appear to be programmatically connected to its corresponding CSS property within.animate__animated
either.