Streaming live at 10am (PST)

CSS Animations issue


#1

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:


#2

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...)


#3

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.


#4

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:

http://css-tricks.com/almanac/properties/b/backface-visibility/

But this needs a little playing around with...

Good luck with it...

Cheers


#5

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


#6

#7