CSS Flip Transition Between Two 's

Question

I have created a flip transition between two divs using the following css...

.flip-container {
    -webkit-perspectiv         


        

Answer 1

For the right half, I encounter this with my website (http://worldisbeautiful.net) which use the flip animation too. It looks like a webkit bug, your animation works fine with firefox. I had some hard time to avoid this bug, and i'm not sure how you can avoid it with your animation because mine involve 2 additionals DIV inside "back" DIV. However, I had to use pointer-events: none; inside the back div, hope it can help you.

For the second question, i suggest you to display degraded version by default. Then, you can use something like Modernizr to check for browsers supports and then use the CSS you need for your animation. http://modernizr.com/ You'll need to check for csstransitions, csstransforms and csstransforms3d.