Question

I’ve discovered ways to transform css shapes using animations like the ones demonstrated here: http://matthewlein.com/ceaser/

Does anyone know if it is possible to get more advanced with CSS or other non-flash code, to create animations more complex – even along the lines of the effect you see when minimizing or maximizing windows on Mac OS toolbar?

Is that possible or out of the realm of possibility using css?

Thanks,

Answer 1

This should be enough to get you started:
http://jsfiddle.net/9BTPy/

Notice that I only made a sample for Firefox for simplicity. Otherwise the code would get too big. It is also not the effect from your question, but you should get the idea.

Also see the following links for documentation and other examples:

• http://css3please.com/
• http://www.w3schools.com/cssref/css3_pr_keyframes.asp
• http://www.w3schools.com/cssref/css3_pr_animation.asp

Additional Notes:

If you really have to do it this way, you are off way better with jQuery-Animations. The support over the different browsers is better, and it may be even simpler to do the effect you describe. It’s also way nicer to maintain. 🙂