Dynamic Page Transitions

I am trying to transition content with a @keyframes animation when loading and unloading content with Ajax. A active demo is currently here: Test Page I thought maybe I could use

Solution 1:

Use translate3d(x,y,z) instead of margin-top. That speeds up the animation.

Otherwise, I have no straight answer since your code looks valid at first glance. But I've written an article about CSS Animations: http://samuli.hakoniemi.net/having-fun-with-css-keyframes/ . Maybe you should read it and compare whether you're doing something wrong.