Streaming live at 10am (PST)

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.