Animate.css: Option to prefix animation name to avoid conflict with same CSS animation names

[ivalsaraj]

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Problem

The problem I've encountered is when I added animate css cdn into my site, there is a portion of site has gone invisible. After debugging many times I found out that a plugin using an it's own animation named slideInRight, so while loading the animate.css it conflict with the same animation name and the other plugin div section not showing anymore.

Solution

We already have a solution for prefix the class names using the animateConfig's prefix option. We would love to extend the functionality to prefix the animation names too.

There are 2 possible solutions I have to suggest

1. if we add "animateConfig": {. "prefix": "animate__". } then it will prefix the animation names like this @keyframes animate__slideInOut
2. Introduce a new config like this "animateConfig": { "prefix": "animate__", "animationPrefix": "animate_" } to prefix animation names

This can avoid conflict in using the same animation names by other scripts, fadeIn, fadeOut animation name are too common and so there is a high possibility if conflicting with the animation names if one have written their own custom animation vs the animate.css animation names.

[WarenGonzaga]

Thanks for the report @ivalsaraj!

What do you think? @eltonmesquita? I can work on that.

[eltonmesquita]

That makes sense and yes, we should add It too, although I don't know if postCSS can make it easy to achieve as it made for classes. @WarenGonzaga, if you can have a look at this and propose a solution it would be great.

[eltonmesquita]

Also, we'll have to release a new major version (v5.0.0) when publishing this as we'll have a major breaking change. Maybe we could add a few new features - and maybe animations - like #1009 in the new release?