From the docs: Since version 4, Animate.css uses custom properties (also known as CSS variables) to define the animation's duration, delay, and iterations.
However, only animation-duration is defined on .animated currently , so defining delay and repeat props on the element or at :root have no effect unless you add one of the modifier classes.
It would be possible to add the delay-1sand repeat-1 classes to trigger the expected behavior, but then you might get a mismatch between the prop value (say you pass in 1.5s on one element and 2 repeats on another, etc).
By adding animation-delay and animation-iteration-count on the base class, explicit control can be set on each element and globally.
Fixes https://github.com/animate-css/animate.css/issues/1544
From the docs: Since version 4, Animate.css uses custom properties (also known as CSS variables) to define the animation's duration, delay, and iterations.
However, only
animation-durationis defined on.animatedcurrently , so defining delay and repeat props on the element or at:roothave no effect unless you add one of the modifier classes.It would be possible to add the
delay-1sand repeat-1classes to trigger the expected behavior, but then you might get a mismatch between the prop value (say you pass in 1.5s on one element and 2 repeats on another, etc).By adding
animation-delayandanimation-iteration-counton the base class, explicit control can be set on each element and globally.