Animate.css: Animate.css and typeahead z-index problems.

[phlegx]

Hi! I use typeahead.js and animate.css to animate the input field of typeahead.

<div class="animated bounceIn">
    <form id="typeahead-form"...>
        ...
    </form>
</div>

Problem: the dropdown of the typeahead is shown like transparent. If I remove the animation all works fine. So, the animation seams to change some CSS to the typeahead form. Any idea?

[tonimichel]

I experience the same issue with ordinary bootstrap dropdowns, after an animation has finished.
It seems as if the -webkit-transform: translateY(0) property on the parent element causes a very weired z-index-like effect for children with position absolute.

[elastisteve]

Any solution for this? This is driving me nuts for hours!

[laudirbispo]

Here is the solution!

Change:
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}

To:
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:none!important;animation-fill-mode:none!important}

Now z-index will work!
If necessary, change the z-axis value

[Bizarrus]

Thanks for the solution!

But, the z-index won't work if the animation is currently running.

[eltonmesquita]

As animate.css uses 3d Transforms for performance reasons, the z-index might not be respected in some cases. Please read this article to understand a little bit and fix your issues:
http://katydecorah.com/code/z-index-and-transform/

I'll close this as it's not a real issue, but a side effect. Might be worth to add some notes in the readme to warn about this particular behavior. Linking #681 to take note on this.