CSS Animations issue

I’ve successfully integrated some CSS animations from animate.css on other webflow sites before. However, on this page below, the specific effect (flipInX) acts weirdly. What am I doing wrong?

page: http://gca.webflow.com/realisations (hover on images)
my code:

are you referring to the flickering? or what exactly… for me the flip animation works, it just gets that nasty css3 flickering issue (and it is a common issue, not specific to webflow I think…)

Yes @cyberdave , I’m referring to the flickering issue. And it’s so prominent that the animation is not usable. Is there any parameters I can change to arrange that? Because on daneden’s github site the animation works just fine. See my example below.

Hi @LaurentCardinal, well the fix should be to change the backface visibility for the animation.flip to hidden for the div holding these images… but… I can’t seem to get that to work either when i set the css through chrome inspect element…

The issue though I think is with webkit and the backface visibility, although it seems there could also be some other css things that can be tried… I recommend to search on web for “webkit css flickering” and try to find a few css overrides you can try to see if the problem can be corrected… there is one webpage that describes the condition:

But this needs a little playing around with…

Good luck with it…

Cheers

Again, thanks @cyberdave. I’ll look into it.