Question

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 no JavaScript but I am not sure if this will work? Could I be wrong in my CSS attempt below instead?

/* Animation Settings */
.aniDown {
z-index:0;
-webkit-animation-name: slideDown;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-direction:normal;
}

@-webkit-keyframes slideDown {
0%   { margin-top:-3000px; }
40%  { margin-top:-100px;  }
100% { margin-top:0px;     }
}

header a:active .aniDown, 
header a:focus .aniDown {
-webkit-animation-name: slideUp;
}

@-webkit-keyframes slideUp {
0%   {margin-top:0px;}
20%  {margin-top:-1000px;}
100% {margin-top:-3000px;}
}

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