Add .animate__animated to all .animate__animationName classes as a requisite in CSS file

[pascalinger]

Is your feature request related to a problem? Please describe.

I'd like to start (and restart) animations once they enter the viewport.

Describe the solution you'd like.

I'd like to be able to only play an animation once the element enters the viewport. To do that properly, I will use a javascript scroll observer which adds a class once the element enters the viewport.

To keep things simple, I would add the class .animateanimated. Not all .animateanimationName in the CSS file carry the class .animate__animated in their ruleset, so the animation would not restart if the class is added a second time:

example

.animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }

.animateanimated.animatepulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }

Describe alternatives you've considered.

I've considered adding the animationName class to the attributes and adding that individual class, but that seems like unnecessary overhead considering the simple change necessary.

Additional Context

No response

[eltonmesquita]

Sorry, no plans to add any js to the library. Duplicate from #785

[pascalinger]

Oh but I was not asking for JS in the library. I was asking for additional specificity on the animations that would allow us to replay the animation by removing and adding the class animate__animated instead of the specific animation class. Since both classes are required to play animations, this should also not hurt compatibility.

[pascalinger]

@eltonmesquita since you marked completed im mentioning you just in case