Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

--animate-delay for each element? #1544

Open
jack-fdrv opened this issue May 28, 2022 · 6 comments · May be fixed by #1780
Open

--animate-delay for each element? #1544

jack-fdrv opened this issue May 28, 2022 · 6 comments · May be fixed by #1780

Comments

@jack-fdrv
Copy link

jack-fdrv commented May 28, 2022

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

image

Desktop

  • iOs
  • Chrome

Smartphone

No response

Additional Context

No response

@jack-fdrv jack-fdrv added the bug label May 28, 2022
@DaywisonSilva
Copy link

Hi @jack-fdrv , I can fix it.

@nelabuzov
Copy link

👋 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
Copy link
Collaborator

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
Copy link

@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
Copy link

Pease assign this issue to me

@Bimbimz
Copy link

Bimbimz commented Oct 28, 2024

document.querySelector('.selector').style.setProperty('--animate-delay', '1s')

Why not work?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants