Dynamische Seitenübergänge

Question

Ich versuche Inhalt mit einer @keyframes Animation beim Laden und Entladen von Inhalten mit Ajax zu überführen. Eine aktive Demo ist derzeit hier: Test Page

Ich dachte, vielleicht könnte ich kein JavaScript verwenden, aber ich bin mir nicht sicher, ob das funktioniert? Könnte ich stattdessen in meinem CSS-Versuch falsch liegen?

/* 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

Verwenden Sie translate3d (x, y, z) anstelle von margin-top. Das beschleunigt die Animation.

Ansonsten habe ich keine direkte Antwort, da Ihr Code auf den ersten Blick gültig aussieht. Aber ich habe einen Artikel über CSS-Animationen geschrieben: http://samuli.hakoniemi.net/having-fun-with-css-keyframes/. Vielleicht solltest du es lesen und vergleichen, ob du etwas falsch machst.