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

1. Run this minimized test case, which includes --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

• 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.

@charset "UTF-8";/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

[…]

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.