hinge triggers immediately #1466
-
|
Applying "animate__hinge" class to an element triggers the animation as soon as the page is loaded, The demo works beacause it adds both classes at once. My setup to reproduce on Google Chrome Version 97.0.4692.71 (Official Build) (64-bit): <div class="animate__hinge"><img src=https://github.com/animate-css/animate.css/discussions/"https://picsum.photos/300/200">">Expected behavior: no animation. The few other animations I tried worked as I expected. I will experiment with Animate.css-Dynamic, with using the bare keyframes definitions and by slicing down Animate.css to the minimum components. Thank you |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 1 reply
-
|
See #1453 |
Beta Was this translation helpful? Give feedback.
-
|
I think I deserve an answer: if "animate__animated" is not the trigger, what's its purpose? |
Beta Was this translation helpful? Give feedback.
-
|
.animated {
animation-duration: var(--animate-duration);
animation-fill-mode: both;
}If you don't want the animation to be triggered at page load, it's better to add both classes with js, not only one. You can also just set the CSS |
Beta Was this translation helpful? Give feedback.
-
|
I see, it's just a light factoring.
In a backend like wordpress's you just have access to additional classes, not data. Unless you develop a proper editor. I'll try to reshuffle animate.css to be used in such environment: adding classes like "animate_onload", "animate_ondisplay" etc |
Beta Was this translation helpful? Give feedback.
-
|
The "problem" with Hinge is that it's one of the few animations that have a redefinition of animation-duration (the others beiing heartBeat, bounceIn/Out, flipOutX/Y). |
Beta Was this translation helpful? Give feedback.
animate__animatedis just a helper, it doesn't "hold" the animation keyframe, it just gets some animation related properties, as you can see here:If you don't want the animation to be triggered at page load, it's better to add both classes with js, not only one. You can also just set the CSS
animationproperty yourself and not use the helper class