I know that to trigger Css Transition, you need to change the value of the specified Css Property, but when is a CSS Animation triggered ? And how to trigger them ?
I have been searching on Google for hours, yet i haven’t found any properly answer. Most of the articles i have read only answer tell me how to trigger them, not when they’re triggered. I hope i can find my answer here
Hello @LuckEx. I am sorry, I didn’t understand your question. Can you be more clear? An example or an image will be appreciated.
Thanks!
Basically, i want to know when a CSS Animation is triggered, for example if i have an example like below, the animation will start once the document is completely loaded, right ? Is there any other way to trigger the animation such as changing the properties, etc… ?
Thanks !!!
Yes. You can. If you assign the animation to the element’s :hover pseudo class, it will trigger animation when hovering over the element. Same with :focus, :active, etc.
If this is not what you want, you can use JS to trigger the animation conditionally.
Yeah, i want to know about how to trigger them by Js.
Due to the articles i have read, they usually add a class in which the animation property is defined to the elements you want to trigger the animation. But in this example on W3schools, they only need to change the display value. I don’t really understand how an animation start in general. Therefore, i will be very appreciate if someone explain it to me
Example link: https://www.w3schools.com/howto/howto_css_login_form.asp
Thanks !!!
Hey @LuckEx. That is done by using JS to change the display property of the form to block when clicking on the button. By default, the display property is set to none. This will hide the form. The animation is set normally.
The reason the animation is triggered when clicking on the button is because CSS animation is triggered when the element is visible.
Hope you understand.
I got it, thanks !!!
