You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
handcoding
changed the title
--animate-delay has no effect (and I think that I’ve figured out why)--animate-delay has no effect (and I think that I’ve figured out why)
Jun 14, 2024
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/dyEZxoJ
Expected 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.The text was updated successfully, but these errors were encountered: