Animate.css changes positioning of absolute centered element

[TheWoops]

Hello all,

I am facing an issue with the animate.css rotateIn-class.
I have a header element that is centered in the body using the following css:
#heading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

If I apply the rotateIn-class to that element, the element is NOT CENTERED anymore.
I think this is because the respective keyframes of the rotateIn-class use the transform property as well.
@Keyframes rotateIn
{ 0% { -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } }

This means that in the end I ham using transform element twice which leads to a conflict (using my own transform property and the one within the keyframe of the rotateIn.css).

I illustrated the issue here: https://codepen.io/thewoops/pen/ZEWPvZB?editors=1100

In the end I solved this issue writing my own keyframe (adapting the keyframe from the rotateIn-class)
But I think this should not be solution, copy-paste and adapt the code within the lib.
Maybe it would be a nice feature being able to override the properties of a keyframe?

Any better solutions?

[eltonmesquita]

Please, see #1117 . There's no way the library can handle this by itself.

[TheWoops]

Okay Thanks. Adding a section in the docs with guidelines about this is a good idea.

[eltonmesquita]

Good call. I'll try to do this together with #1118.