Animate Page Transition Using jQuery and CSS3 Scale Transforms

This was just a fun experiment to see if I could do this. I use jQuery for the animation, and CSS3 for the scale transform of the entire content area. The effect is one where the content area ducks into the background and a new content area slides in (from one of four directions). Certainly could use some re-factoring, but I'm pleased with how it turned out.

transition layout

I am a little ashamed to admit I have not used CSS transitions or animations in nearly 2 years. Here is part of my attempt to re-learn tem. Hope to have a more polished pen next project!